Arc Diagram Maker

How the Arc Diagram Maker works

An arc diagram lays every node out on a single horizontal line and draws each connection as a semicircle between two points on it. Compared with a force-directed network, it gives up the freedom to place nodes anywhere in two dimensions, and gains something valuable in return: the layout is completely predictable. Labels never overlap, the same data always draws the same way, and patterns that depend on order, such as sequences, repeats and loops, become visible at a glance.

When to use an arc diagram maker

Arc diagrams were described by Martin Wattenberg in 2002, who used them to show repeated passages in music and text: every arc joins a phrase to its next repetition, so a song's verse and chorus structure appears as nested rainbows. Since then they have become a standard way to show:

• Cross-references. Chris Harrison's well-known visualisation of the Bible draws more than 63,000 cross-references as arcs over its chapters, one of the most shared examples of the form.
• Character networks. Who talks to whom in a novel or a film, with characters ordered by first appearance, so the arcs read like a timeline of relationships.
• Process flows. Steps of a workflow, customer journey or pipeline along the line, with arcs underneath showing where people loop back or repeat a step.
• Dependencies. Modules in a codebase or tasks in a project, where long arcs flag connections between distant parts that may be worth a second look.

It works best from about 5 to 40 nodes. Beyond that the labels get crowded; a network graph handles large, tangled networks better, and a chord diagram suits dense flows between a few groups.

Writing the links

One link per line: a source, an arrow, a target and an optional value after a comma. The arrow may be "->", "=>", ">" or a tab, so a spreadsheet with two or three columns pastes in directly. A link with no value counts as 1. Lines beginning with "#" are ignored. Names are matched exactly, so "Alice" and "alice" are two nodes. For example, Checkout -> Payment, 420 draws one arc with a value of 420.

Ordering the nodes

The order along the line decides how long each arc is and where arcs cross.

A sensible order is often the difference between a clean diagram and a tangle, so try all three. As typed gives you full control: write the lines in the sequence you want the names to appear.

Arcs above or on both sides

With Arcs set to Above, every link is drawn over the line, and direction is shown only by the colour of the arc. With Both, links that go forward along the line, left to right, are drawn above and links that go backward are drawn below. That makes a directed graph readable without arrowheads: a diagram with everything above and nothing below is a strict sequence, and the arcs underneath are the returns and loops. A link from a node to itself is drawn as a small loop.

Sizes, colours and labels

Thickest arc sets the stroke width of the largest value, and smaller values scale down to a hairline. Node circles grow with the number of links that touch them. Arc colour follows the source node by default, or the target if you would rather see where links arrive. Label angle rotates the names under the line, which lets a diagram with thirty or forty nodes stay readable in the same width. The palette menu changes the colour set.

Reading the result

The panel under the diagram gives four figures:

• Nodes and Links count the distinct names and the link lines parsed from your text. If either is higher than you expect, look for a typo or a stray capital letter creating an extra node.
• Most connected names the node with the most links and how many touch it. Values are not counted here, so ten small links outrank one large one.
• Longest arc names the link that spans the furthest along the line. When it is long, try another node order; a good order keeps the longest arc as short as the data allows.

Tips and exporting

• Keep node names short. Long labels force a steeper label angle and make the chart harder to read.
• Merge minor nodes into an "Other" node when a handful of names carry most of the links.
• Download SVG gives a vector file that scales without blur, with names kept as text and values kept as hover titles. Download PNG renders at one, two or three times the preview width, and Copy SVG puts the markup on the clipboard.
• Everything is drawn in your browser, so the text never leaves your machine.

Related tools