Code syntax

Open the Code tab in the left panel to see your diagram as text. Edit it and the canvas updates live; edit the canvas and the code updates to match. The language has just two statements — node and edge — plus # comments and blank lines, which are ignored.

Nodes

node <id> : <type> "<text>" @ <x>,<y> size=<xs|s|m|l|xl> style=<name>

Part	Meaning
`id`	A unique identifier (letters, digits, hyphens), e.g. `start`, `c1`. Edges refer to it.
`type`	One of the shape types (see below).
`"text"`	The label. Use `\n` for a line break.
`@ x,y`	Top-left position in canvas pixels (snapped to the grid).
`size=`	One of `xs s m l xl`. Optional — defaults to `m`.
`style=`	A style key (see styles). Optional — a sensible default is used per shape.

node start : terminator "Begin" @ 40,40 size=m style=green
node check : decision "Valid?\nproceed?" @ 40,160 size=s style=amber

Edges

edge <from> -> <to> [: "<label>"] [from=<side>] [to=<side>] [line=<solid|dotted>] [arrow=<none|single|double>] [corners=<curved|sharp>] [match=on]

Option	Values	Default
`: "label"`	Any text, e.g. `"Yes"`	none
`from=` / `to=`	`n` e `s` w (the side each end attaches to)	auto (faces the other shape)
`line=`	`solid` or `dotted`	`solid`
`arrow=`	`none`, `single`, `double`	`single`
`corners=`	`curved` or `sharp`	`curved`
`match=`	`on` — tint the line to the destination shape's outline colour	off

edge start -> check
edge check -> done : "Yes" from=s to=n line=solid arrow=single
edge api   -> store from=e to=w line=dotted arrow=single

Shape types

terminator · process · decision · data · document · database · subprocess · connector · text · person

decision, database and connector use the squarer size table; the rest (including the new person card) use the flat, wide table. Sides are n (top), e (right), s (bottom), w (left).

A person node renders a profile card: its "text" is the name, with an optional role (subtitle) and photo set in the inspector. In code it also accepts role="…"; the photo is stored with the saved design.

Styles

Group	Keys
Light	`plain` `sky` `mint` `sun` `rose` `violet` `teal` `amber` `pink` `slate`
Deep (white text)	`navy` `green` `red` `indigo` `charcoal`
Dotted outline	`sky-dot` `slate-dot` `mint-dot` `amber-dot` `violet-dot`

Full example

Paste this into the Code tab and hit Fit:

# A tiny sign-up flow
node start : terminator "Start"          @ 60,60  size=m style=green
node form  : data       "Enter details"  @ 60,160 size=m style=violet
node ok    : decision   "Valid?"          @ 60,280 size=s style=amber
node make  : process    "Create account"  @ 360,290 style=sky
node db    : database    "Save to DB"      @ 360,420 size=s style=teal
node done  : terminator "Done"            @ 60,460 size=m style=green

edge start -> form
edge form  -> ok
edge ok    -> make : "Yes" from=e to=w
edge ok    -> done : "No"  from=s to=n
edge make  -> db
edge make  -> db   from=e to=e line=dotted

Tip: because the code is plain text, you can store it next to your source code and review diagram changes as a diff.

Next: all features →