Ready.
Quick syntax
A -> B -> C | A chain of steps. Shapes are inferred: a label ending in ? becomes a decision; Start/End/Done become terminals. |
Approved? -->|Yes| Sign | Labelled arrow (great for decision branches). |
rev[Review contract] | Process step (rounded rectangle). rev is a short id you can reuse. |
ok([Done]) | Terminal (start / end pill). |
dec{Approved?} | Decision (diamond). |
io[/Upload file/] | Input / output (parallelogram). |
sig[Signed] ::doc | Docusign dog-ear agreement card. |
flow[Automate] ::picto=workflow | Node with an official pictogram. Try agreement, logic, trust, signing, growth… |
dec{Approved?} ::accent | Poppy accent outline to spotlight one node. |
db[(Records)] · sub[[Sub-flow]] | Database (cylinder) & subprocess shapes. Also x ::delay and x ::note. |
pay[Pay] ::color=cobalt | Fill a node with a brand colour: cobalt / violet / inkwell / mist / ecru. |
A -.-> B · A ==> B | Dashed / thick connectors. Yes/No (and Approve/Reject) labels colour themselves. |
a ::group=g1 | Place nodes side-by-side in one swimlane cell (same lane + same group). |
Settings (put at the top)
@title Contract signing | Diagram title. |
@direction LR | Layout direction: TB (default) or LR. |
@accent violet | Terminal colour: cobalt / violet / inkwell. |
@density roomy | Spacing: compact / cosy / roomy. |
@connectors elbow | Arrows: curved / elbow / straight. |
// comment | Lines starting with // or # are ignored. |
Cross-functional (swimlanes) — great for a slide
@lanes Sales | Legal | Finance | Declare the lanes (rows), top to bottom. Turns on swimlane mode and defaults to landscape (LR) so it fits a 16:9 slide. |
@lane Legal | Everything declared after this line goes in the Legal lane — declare your nodes lane by lane, then wire the arrows. |
step[Review] ::lane=Legal | Or set a single node's lane inline. |
@lanecolor cobalt | Label-bar colour: violet / cobalt / inkwell / mist / slate / gradient. |
@laneheight tall | Band height: auto / compact / tall (or a number like 200). Taller fills a slide more. |
@laneseparator dashed | Lane divider style: strong / solid / dashed / none. |
@direction TB | Vertical swimlanes (lanes become columns, labels on top). |