Quickstart
Five steps from zero to a real diagram. Edit any example to see it update live.
1
Two nodes, one edge
This is the smallest valid graph. Nodes are created automatically when referenced in an edge.
2
Shapes and labels
Add a shape after the colon — c circle, d diamond, r rect, p pill, o oval, h hexagon. Then a label.
3
Edge labels
Put a label after the edge to annotate it.
4
Direction
Set the layout direction with >LR, >TB, >RL, or >BT. Default is top-to-bottom.
5
Groups
Wrap nodes in @name{...} to group them. Groups can have labels too.