Feature

Diagrams as code: the o-flow syntax

Engineering · 5 min read

Toggle the Code tab and your diagram becomes editable text. Change it and the canvas updates live. Version it like anything else.

node a : process "Receive"node b : decision "Valid?"edge a -> b size=m style=skyReceiveValid?
The text on the left renders to the diagram on the right, live.

One line per shape

A node is node <id> : <type> "text" @ x,y size=… style=…. An edge is edge a -> b with optional label, sides, line style and arrows. That is the whole language.

Two-way and live

Edit the code and the canvas redraws as you type; drag on the canvas and the code updates to match. Mistakes are shown inline rather than breaking your diagram.

Great for reviews

Because a diagram is plain text, you can paste a spec into the panel to generate it, store it next to your code, and review changes as a diff in a pull request.

Try o-flow free →

← Back to the blog