Diagram editor
Start your first diagram
Drag a participant from the left panel onto the canvas,
or start from a ready-made example.
Stage palettes apply only to this show. Notebook Novel is applied as the diagram theme so its front cover, paginated Index, bound spreads and thank-you back cover stay together.
The ideas ahead
What we will draw
Thank you
Help the next edition become even better.
Syntax cheatsheet (complete)
// Comment lines start with // title Order checkout // "title" text appears at the top // ---- Participants (UML shapes) ---- participant "Web App" #6d7cff 🌐 // box actor Alice 👩 // person database "User DB" #10b981 🗄️ // cylinder boundary "Order UI" // UML boundary control "Order Controller" // UML control entity Order // UML entity queue "Email Jobs" // UML queue // Optional: #hex color and an emoji icon. // Quotes are needed for names with spaces. // Names first used in a message are // created automatically as boxes. // ---- Messages (flows) ---- Alice->Bob: solid + filled head = call Alice->>Bob: solid + open head = async Bob-->Alice: dashed = reply / return Bob-->>Alice: dashed + open head (alias) Alice->Alice: self message Alice->Bob: colored message #ef4444 Alice->Bob // text after ":" is optional // ---- Object lifecycle ---- Controller->*Order: «create» (marks *) Controller->xOrder: «destroy» (marks x) activate Controller deactivate Controller // found / lost messages (enter or leave the diagram): [->Alice: external event arrives Alice->]: goes off-diagram // ---- Font & border styling (works on participants, messages, // notes, refs, dividers, blocks, and state invariants) ---- actor Alice font:serif size:16 textcolor:#7c3aed border:3 borderstyle:dashed // font: sans | serif | mono | rounded | condensed // size: text size in px textcolor: #hex // border: width in px borderstyle: solid | dashed | dotted // Tokens can appear in any order, after the text/color, e.g.: Alice->Bob: careful now font:mono size:12 textcolor:#ef4444 // ---- Notes, references & state ---- note over Alice: on one lifeline note over Alice,Bob: spanning two note left of Alice: beside, to the left note right of Bob: to the right #f59e0b ref over Alice,Bob: see "Login" diagram state Alice: ready // a state invariant — a condition true at that point // ---- Phases ---- == Phase two == // ---- Blocks ---- loop until accepted Alice->Bob: retry end opt only if logged in Alice->Bob: show profile end alt payment approved Bob-->Alice: receipt else payment declined Bob-->Alice: error end par at the same time Alice->Bob: task A else Alice->Bob: task B end break on fatal error Bob-->Alice: abort end critical must not interleave Alice->Bob: atomic step end // Also supported: seq, strict, neg, assert, ignore, consider seq default ordering Alice->Bob: step one end strict Alice->Bob then Bob->Alice Alice->Bob: first end neg impossible combination Alice->Bob: contradiction end assert only valid continuation Bob-->Alice: ack end ignore incoming pings Alice->Bob: heartbeat end consider only these Alice->Bob: important end