Graph drawing

Type the links on the left, one per line, and the graph lays itself out on the right. Your work saves as you type, and once you make it public anyone with the link can view it and edit it with you.

[[ t.loading ]]

[[ t.gate_title ]]

[[ gateText ]]

[[ t.notfound_title ]]

[[ t.notfound_text ]]

[[ t.local_note ]]

[[ t.gone ]]

[[ t.editor_label ]] [[ sizeText ]]

[[ t.errors_title ]]

[[ t.chart_title ]] [[ count('nodes', parsed.nodes.length) ]] · [[ count('edges', parsed.edges.length) ]]

[[ t.renderer_loading ]]

[[ t.renderer_error ]]

[[ t.empty ]]

[[ view === 'normal' ? t.viewer_help : t.view_exit ]]

How it works

Syntax

The first line sets the direction. After that, one line per link. A node name can hold almost anything (accents, apostrophes, commas, dashes) except spaces, brackets and the characters ; " | < > &: use _ for spaces, or put the text in square brackets, A[My node]. The first node you write goes at the start and the rest flows to the right (or downwards).

flowchart LR	Direction: LR left to right, RL the other way, TD or TB top down, BT bottom up.
A --> B	Solid arrow from A to B.
A -.-> B	Dashed arrow.
A --> B --> C	Several arrows in a row.
A[Node text]	Node A shows some text instead of its name.
%% note	Comment: the line isn't drawn.
%%{init: {"flowchart": {"nodeSpacing": 40, "rankSpacing": 80, "groupSpacing": 30}}}%%	Spacing in pixels, usually on the first line. nodeSpacing: between nodes in the same column. rankSpacing: between columns. groupSpacing: extra room between groups of children of different nodes. Any of them works on its own. With "lineJumps": false, crossing edges don't hop over each other.

The drawing is done by Graphviz (the layered dot algorithm), running in your browser. It puts nodes in columns, keeps arrow crossings down and copes with loops too: the first node always stays at the start.

If nodes from different branches end up too close, use groupSpacing: children of the same node stay together, and the space you pick opens up between one group and the next. Columns get a little wider, which rankSpacing can make up for. You can copy the text and download the graph: SVG to print or edit it, PNG to paste it wherever an image is needed.

Saving and limits

You need a free account. The graph saves itself 3 seconds after you stop typing, and the bar on top tells you when something isn't saved yet. Each account can keep up to 5 graphs of 100 KB of text each. A graph nobody touches for 6 months is deleted.

Sharing and editing together

A new graph is visible only to you. Flip the "Public" switch and anyone with the link can view and edit it, even without an account; only you can rename it, make it private again or delete it. The link holds a random id that can't be guessed.

Every 5 seconds the page checks whether someone else saved. Edits on different lines are merged on their own. If two people changed the same line, both versions are kept, one below the other: nothing gets lost, at worst there's an extra arrow to delete.