| DIAGRAM SETTINGS | |
| diagram "Title" | Set title |
| direction LR|TB | Layout direction |
| theme dark|light|blue|sepia | Visual theme |
| CONFIG BLOCK (new v7) | |
| config { | Open config block |
| laneWidth: 200 | Lane width px |
| laneGap: 8 | Gap between lanes |
| rowHeight: 100 | Vertical row spacing |
| radius: 10 | Arrow corner radius |
| fontSize: 11 | Node label font size |
| padding: 20 | Node left padding |
| } | Close config |
| LANES | |
| lane "Name" blue | Named color |
| lane "Name" #ff4466 | Hex color |
| endlane | Close lane |
| NODE TYPES | |
| process id "Label" | Rectangle |
| decision id "Q?" | Diamond |
| start id | Filled circle |
| end id | Double circle |
| note id "Text" | Dashed box |
| io id "Label" | Parallelogram |
| sub id "Label" | Sub-process |
| actor id "Name" | ๐ค Stick figure |
| db id "Name" | ๐ Cylinder |
| cloud id "Name" | โ Cloud blob |
| queue id "Name" | โ Buffer queue |
| NODE OPTIONS (append) | |
| color:#hex | Override node color |
| w:200 h:80 | Custom size |
| x:100 y:200 | Pin position |
| ARROWS | |
| arrow A -> B | Solid |
| arrow A --> B | Dashed |
| arrow A -x B | Blocked |
| arrow A <-> B | Bidirectional |
| ARROW OPTIONS (new v7) | |
| "Label" | Arrow label |
| YES / NO | Branch color |
| from:right to:left | Port control |
| style:dashed|dotted|thick|double | Line style |
| color:#hex|name | Custom color |
| width:2 | Stroke width |
| end:diamond|open|circle|none | Arrowhead |
| flip | Flip route |
| COLORS | |
| blue purple green yellow red pink cyan orange teal gray white black | Named |
| #rgb or #rrggbb | Hex |
| MISC | |
| // comment | Line comment |
| ## Section heading | Visual divider |
| config{} block | Control laneWidth, rowHeight, radius, fontSize globally in code |
| Inline arrow styles |
style:dashed color:#red width:2 end:diamond
|
| 4 new node shapes | actor ยท db ยท cloud ยท queue |
| Inline node color |
process id "Label" color:#ff4466
|
| Unquoted labels | Simple IDs auto-used as label if no quotes given |
| ## headings | Section dividers in code โ visual only |
| Copy PNG โ | Copies diagram as PNG to clipboard directly |
| Reference tab | Full syntax reference always in left panel |
| diagram "Title" | Set diagram title |
| config { laneWidth:200 rowHeight:100 } | Global sizing |
| lane "Team A" blue | Start a swimlane |
| process a "Do thing" color:#ff4466 | Colored node |
| actor u "User" | Stick figure |
| endlane | Close lane |
| arrow a -> b style:dashed color:yellow | Styled arrow |
| V / A / Space | Select / Arrow / Pan |
| F ยท Del ยท Esc | Fit / Delete / Cancel |
| โZ / โY / โD / โA | Undo / Redo / Dup / All |
| โโต / โS | Render / Export SVG |
| Arrow keys (+ Shift) | Nudge 1px / 10px |
| Scroll ยท Alt+drag | Zoom ยท Pan |