Color-Coded Branching Scenario Flowchart

A color-coded branching scenario flowchart shows you the decision structure at a glance. Use the DotGraph proofing format with Twine to create one.

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.

A color-coded branching scenario (green for good, red for bad, yellow for OK)

This flowchart shows the structure of my client screening branching scenario, which you can view in Twine and built in Storyline.

Setting up your Twine story

Tags

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.)

StorySettings

The StorySettings passage is a place to add settings that affect how the story displays or functions.

  1. Add a new passage (not connected to any of the other passages).
  2. Name it StorySettings (no space).
  3. Add this code to the passage text.
dotgraph:{"palette":["red","green","yellow"]}

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 DotGraph

Install the DotGraph proofing format and view the proofing copy. (You’ll only need to do this once.)

  1. On the Twine home screen, select Formats.
  2. Select Add a New Format.
  3. Paste this URL and select Add.
https://mcdemarco.net/tools/scree/dotgraph/offline/format.js

Use DotGraph

  1. On the Proofing Formats tab, make DotGraph your default format.
  2. Close the Formats dialog box.
  3. Open your story.
  4. Select the story name, then select View Proofing Copy.
  5. Select the Color by tag option.
  6. Adjust other settings if desired (like using passage names instead of ID numbers).
Screenshot of DotGraph settings

GraphViz

In DotGraph, you’ll probably only see the source file. You need to use GraphViz to view the image.

Copy and paste your Dot Source to GraphVizFiddle or WebGraphViz. This will generate the image for you. You can save the SVG image or take a screenshot.

Additional notes

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.

4 thoughts on “Color-Coded Branching Scenario Flowchart

  1. Thanks for this, Christy. It’s been two years since you wrote this. Have you learned anything new about creating color-coded branching in the meantime?

    1. Actually, there’s a much simpler way to do this now! Twine has gotten some updates since I wrote this two years ago. One of the new features is that you can color code the tags. You can see how I coded the good, OK, and bad choices (green, yellow, and red respectively) in this example. https://www.christytuckerlearning.com/how-to-use-conditional-feedback-in-twine-scenarios/

      If you zoom out to view only the story structure, you can create see just the colors on the side of each passage, plus all the connections, without any of the text. That’s how I created the images in this post.
      https://www.christytuckerlearning.com/time-to-create-branching-scenarios/

      The method above still works, but it’s so simple to just do it directly within Twine now that I probably wouldn’t use DotGraph unless I needed some specific customization.

Leave a Reply