Skip to content

A Twine 2 proofing format that renders nodes as a GraphViz (dot) graph.

License

Notifications You must be signed in to change notification settings

mcdemarco/dotgraph

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DotGraph

DotGraph is a proofing format for Twine 1 and 2 that generates a GraphViz image of your story nodes.

To add DotGraph to Twine 2, use this URL (under Formats > Add a New Format): https://mcdemarco.net/tools/scree/dotgraph/format.js.

To add DotGraph to Twine 1, download the latest release.zip from GitHub, unzip it, and move one of the dotgraph-1 folders to your Twine 1 targets folder. Alternately, create a new folder called dotgraph inside your targets folder, then download this file https://mcdemarco.net/tools/scree/dotgraph/header.html and place it inside the dotgraph folder. (See the Twine wiki for more information about installing and using story formats in Twine 1.)

To used DotGraph with a compiler like TweeGo, download the latest release.zip from GitHub, unzip it, and move one of the dotgraph folders to the appropriate location for story formats.

To use DotGraph to graph a published story, open an already-dotgrapphed story in a browser and add a question mark followed by the story's URL. You can also do this by typing in the URL at the DotGraph site here.

Notes

The start node is double-circled, as are any unreachable nodes. Traced nodes are hex-shaped. When color is on, nodes that are linked but do not exist are colored white. When color by length is on, all other nodes are colored in shades of red (shorter than average) to blue (longer than average) based on the relative length of their contents.

The cluster and color by tag options use the first tag on each passage unless Use last tag is checked; optionally detected special tags are ignored in this ordering. Optional detection of an "End" tag changes the shape of "end" passages to an egg (and puts diagonals on loose ends and disconnected nodes). Optional detection of a "checkpoint" tag changes the shape of checkpoint passages to a diamond. The omit by tag(s) option omits the passage regardless of tag order.

Stray or misplaced nodes can result from the omit tags setting, or from duplicate passage names or other linking issues.

The layout engine options change the graph style; some options are slower than the default ("dot"). Some options are only supported under the "dot" engine, such as clustering by tag and choosing the graph direction (the arrows). You can find a brief description (PDF) of the engines and fuller documentation for each one on GraphViz's documentation page.

The image format is SVG.

Online vs. Offline

The offline versions package the entire Graphviz renderer in the head of the DotGraph output file, making it large but freestanding. The online versions fetch the Graphviz renderer from my website, so an internet connection is required when using them but the file may be also be cached (making your output file load faster if you run DotGraph frequently). In some cases you can only run offline.

Troubleshooting

DotGraph may fail to draw the graph in some versions of Twine 2 due to issues with Chrome; in that case it will still give you the text of the dot source file, as well as some links to sites online that can render it for you.

DotGraph may fail to save the SVG in Safari; if it fails, try a different browser.

For more troubleshooting, help, and examples, see the DotGraph website.

SnowStick

SnowStick is a bit of JavaScript and CSS you can add to stories that use Snowman-based story formats in order to track your reading/proofing progress and graph it with DotGraph. It can also be used without DotGraph. See its separate README for more details.

Versions

2.3.0

Save current settings to local storage (per IFID). Fix a tag issue. Output JSON, GML, GraphML. Fix a DGaaS issue.

2.2.0

Add SnowStick (a reading tracker integrated with DotGraph), support for configuration using the DotGraphSettings passage (a safer and more flexible spot than StorySettings, though the latter is still supported), viewing another story by URL (a quicker way than by loading the story and this format into Twine), and Graphviz engine options (after updating to the latest viz.js to fix some special character issues).

2.1.0

Add a text tracing option and and support for configuration using the StorySettings passage.

2.0.6

Add support for Harlowe's display macro, plus fix a leaf counting issue.

2.0.5

Add option to use last tag for tag colors/clusters, plus fix a start node issue.

2.0.4

Minor fix to tag display.

2.0.3

Counts and marks unreachable passages.

2.0.2

Optionally omit any passages with certain (user-specified) tags.

2.0.1

Optionally parse <> links.

2.0.0

Refactored with support for Twine 1.x, offline use, omitting special passages, and renumbering nodes.

1.1.5

Added saving (except possibly on Safari).

1.1.4

Added various configuration options, scaling, and some statistics.

1.1.3

Decoration of terminal passages (either leaves, or marked with a tag "End").

1.1.2

Optional clustering by (first) tags.

1.1.1

Now in Technicolor!

1.1.0

Used the javascript graphviz engine (hosted elsewhere) for rendering in the browser.

1.0.0

Only built the dotfile and required an external renderer. Not released.

Building From Source

Run npm install to install dependencies. Run grunt package to create the release versions for Twine under dist/. Run grunt --help to list other grunt targets.