Markdown graph / network maker

Lay out a graph or network with Graphviz. Write nodes and edges in the DOT language and let Graphviz arrange even large, dense graphs cleanly.

Graphviz DOT syntax

A graph in DOT is a set of nodes and the edges between them, wrapped in a block. You name the nodes, join them with edges, and Graphviz works out the layout. Here is each piece you can write.

Directed graph

Open with digraph and join nodes with ->. Any name you use becomes a node.

You write

digraph {
  A -> B
  B -> C
  A -> C
}

You get

Undirected graph

Open with graph and join nodes with -- for links that have no direction.

You write

graph {
  A -- B
  B -- C
  C -- A
}

You get

Node labels and shapes

Put attributes in square brackets after a node. label sets the text, shape sets the outline.

You write

digraph {
  start [shape=circle, label="Start"]
  work [shape=box, label="Do work"]
  ok [shape=diamond, label="Done?"]
  start -> work -> ok
}

You get

Edge labels

Give an edge a label attribute to name the link.

You write

digraph {
  A -> B [label="yes"]
  A -> C [label="no"]
}

You get

Layout direction

Set rankdir at the top of the block. LR flows left to right, TB flows top to bottom.

You write

digraph {
  rankdir=LR
  A -> B -> C
}

You get

Clusters

Wrap nodes in a subgraph whose name starts with cluster to draw a labelled box around them.

You write

digraph {
  subgraph cluster_setup {
    label="Setup"
    A -> B
  }
  B -> C
}

You get

Cheat sheet

Write this	You get
Structure
`digraph { }`	A directed graph
`graph { }`	An undirected graph
`A -> B`	Directed edge from A to B
`A -- B`	Undirected edge between A and B
`A -> B -> C`	Chain of edges
Attributes
`A [label="Text"]`	Set a node label
`A [shape=box]`	Set a node shape (box, circle, diamond, ellipse)
`A -> B [label="Text"]`	Label an edge
Layout
`rankdir=LR`	Lay the graph out left to right
`rankdir=TB`	Lay the graph out top to bottom
`subgraph cluster_x { }`	Draw a labelled box around nodes