Learn Glypho in 60 seconds

Five steps from zero to a real diagram. Edit any example to see it update live.

Already have Glypho, Mermaid, DOT, or chatbot output?

Open the editor any time to paste code, render it immediately, and export SVG or PNG.

This is the smallest valid graph. Nodes are created automatically when referenced in an edge.

Add a shape after the colon — c circle, d diamond, r rect, p pill, o oval, h hexagon. Then a label.

Put a label after the edge to annotate it.

Set the layout direction with >LR, >TB, >RL, or >BT. Default is top-to-bottom.

Wrap nodes in @name{...} to group them. Groups can have labels too.