A color-coded branching scenario flowchart shows you the overall structure of a branching scenario at a glance. I use Twine to create branching scenarios. In the default interface and formats, passages are all the same color. Using the DotGraph proofing format, you can generate a color-coded flowchart like this.
Setting up your Twine story
When I plan and write branching scenarios, I usually aim for a combination of good, OK, and bad choices. In Twine, each passage must be tagged Good, Bad, or OK to be color coded later. (I also have been adding tags with numbers to keep track of which passages I have built during development. Now that I learned how to use this proofing format, those number tags may not be needed anymore.)
The StorySettings passage is a place to add settings that affect how the story displays or functions.
- Add a new passage (not connected to any of the other passages).
- Name it StorySettings (no space).
- Add this code to the passage text.
I just used color names, but you can use hex codes here. Order the colors to match the alphabetical order of your tags.
DotGraph proofing format
Install the DotGraph proofing format and view the proofing copy. (You’ll only need to do this once.)
- On the Twine home screen, select Formats.
- Select Add a New Format.
- Paste this URL and select Add.
- On the Proofing Formats tab, make DotGraph your default format.
- Close the Formats dialog box.
- Open your story.
- Select the story name, then select View Proofing Copy.
- Select the Color by tag option.
- Adjust other settings if desired (like using passage names instead of ID numbers).
In DotGraph, you’ll probably only see the source file. You need to use GraphViz to view the image.
I will use the color-coded version of a branching scenario flowchart for myself during my planning and development. (In fact, I used to build these kinds of flowcharts manually in PowerPoint because I find them so helpful.) I would also share this with SMEs and reviewers to give them a better sense of the structure.
Although I like this, I wish the process was easier. I just figured this format out this morning. I’m hoping over time that I’ll be able to streamline it a little bit. This is more steps than I’d like, especially for actually getting the image at the end. I wish the image just appeared in the DotGraph. The documentation implies it should render the image right in the proofing format window, but that isn’t working for me.
However, I like the overall output. This is one of the things I have been missing with Twine, and I’m glad that I have a way to create these flowcharts automatically.