Roughout Help

Comments

// a note to yourself

Ignored entirely — whole line only, no trailing // on other lines

Shapes — per box

box "label" #id

Rectangle

rbox "label" #id

Rounded rectangle

bbox / rrbox "label" #id

Double border (box / rounded box)

diamond "label" #id

Decision point

text "label" #id

Plain label, no border

• spacer or spacer:N as the last thing on a shape's own line adds extra breathing room around just that shape.

Connectors — per arrow

#A -> #B

Arrow

#A --> #B

Dashed arrow

#A ->> #B

Arrow with emphasis (e.g. urgency)

#A <-> #B

Points both ways

#A -> #B: label

Add a label to any connector

• Trailing tokens, any order, all optional: flow:right / flow:down overrides the diagram's default direction for just this one connector; line:elbow routes it with a right-angle bend instead of straight; from:<edge> / to:<edge> (top/right/bottom/left) pins exactly which edge it exits/enters; spacer or spacer:N adds extra room around it.

Shortcuts — no mouse needed

A->B->C

Quick chain — boxes are created for you

• Just type a line of text, then another. Each line becomes a box, connected in order to the one before it.
• Starting a second, separate flow? A leading \ on that line (e.g. \Alternative start) stops it inheriting a connector from whatever came before — a fresh root, not linked to the previous flow.
• Want to branch off one of those lines instead of continuing straight down the list? Hit Expand (⌘E / Ctrl+E) to give every line an #id, then add a #id -> #id connector wherever you want a different flow.

Layout — whole diagram

flow: right

New boxes are placed left to right (default)

flow: down

New boxes are placed top to bottom

• Both are also available as a toolbar toggle — it edits this same line for you. A single connector can override this for just itself — see Connectors above.

Title and footer — whole diagram

title My Diagram, align:left

left / centre (or center) / right — defaults to centre

footer: Version 1.2 — printed [date]

Export-only — never shown in the live editor

• title:My Diagram (colon) also works, first one wins. Every shape shifts down to make room — nothing about their own position is changed.
• footer only appears in an exported PNG/PDF, bottom-left, small and light. [date] anywhere in the text becomes today's date (d-mmm-yyyy) at export time.

Groups — a labeled subset of shapes

group "Label" #gid

Start a labeled boundary

endgroup #gid

Close it

• Everything between the two lines parses completely normally — a group is just a visual boundary drawn around them. A group's own #id can be used as a connector endpoint, same as any shape.

Styles — define once, whole diagram; apply per box

style status:done text:strikethrough border:grey

Define a reusable, named look

box "..." #id status:done

Apply a named style to a shape

box "..." #id border:red text:italic

One-off style, no named style involved

• border: green / blue / orange / red / grey / purple / yellow / teal / pink / indigo ("gray" also accepted). text: strikethrough / bold / italic — combine with commas, e.g. text:bold,italic.
• A shape's own border:/text: always wins over its status's version, property by property — set both if you want a status's look with one thing overridden.
• Also settable from the inspector panel's Status field, once at least one status is defined.
• A malformed spacer:/flow:/line:/from:/to:/status:/border:/text: token (right keyword, value that doesn't parse — e.g. flow:sideways) shows in red, right in the text — as does any other keyword:value-shaped token that isn't one of those eight at all, e.g. background:red.

Fill — wash a shape's own colour into its background

fill:tint

Diagram-wide — subtle wash (~12%) of each shape's own border/status colour

fill:pastel

Same idea, stronger (~28%)

• Defaults to fill:none — every existing diagram looks the same until you opt in. Only affects a shape that already has a border:/status: colour; an uncoloured shape is unaffected.

Comments

// a note to yourself

Ignored entirely — whole line only, same rule as flowchart

Participants — who's on the diagram

Alice->Bob: hello

A bare mention auto-creates both, in first-mention order

participant Bob

Explicit declaration — controls ordering without a message yet

participant "Web Server" #id

Quoted + #id — for a display name with spaces; #id is just bookkeeping

• Participants always render left to right in the order their name is first seen — whichever line mentions it first, declaration or message.

Messages — per arrow

Alice->Bob: label

Sync — solid line, filled arrowhead

Alice-->Bob: label

Reply — dashed line, filled arrowhead

Alice->>Bob: label

Async — solid line, open arrowhead

Alice-xBob: label

Failure/lost — solid line, X instead of an arrowhead

Alice->Alice: label

Self-message — loops back to the same lifeline

• : label is always optional, same as a flowchart connector.

Activation — a lifeline bar

activate Bob

Start a bar on Bob's lifeline

deactivate Bob

End the most recently opened one

• Nesting is supported — activate twice before deactivating shows two overlaid bars, offset to the right; messages touch whichever bar is currently open, not the bare lifeline.
• An activate with no matching deactivate by the end of the diagram is closed automatically, never an error.

Notes — a labeled box beside a lifeline

note over Alice: text

Above a single lifeline

note over Alice,Bob: text

Spans every lifeline listed, in order

note left of Alice: text

Positioned to the left of one lifeline

note right of Alice: text

Positioned to the right of one lifeline

Fragments — conditional/looping/optional blocks

alt condition

First branch of an if/else-style block

else condition

Any number of else branches inside an alt

loop condition

Repeats — no else

opt condition

Optional — runs or doesn't, no else

end

Closes whichever alt/loop/opt is currently open

• The label after alt/loop/opt/else is free text, shown but never parsed for meaning — same as everywhere else in this format.
• Fragments nest freely — a loop inside an alt branch, for example.

Dividers, title, and footer — diagram-wide

title My Title, align:left

One per diagram — first one wins. left / centre (or center) / right

footer: Version 1.2 — printed [date]

Export-only — never shown in the live editor

==Section label==

Full-width divider with a centered label, at that point in the events

• A line that clearly attempts note/participant/==divider== but doesn't parse (missing colon, unclosed quote, no closing ==) shows in red, right in the text.

Tasks — one per line

Buy milk

A bare task — shown in the list, no bar (e.g. a checklist item or heading)

Pack: st:28.sep, end:5.oct

A scheduled task — draws a bar

• Indent a line (any consistent amount of leading whitespace) to make it a child of the task above it. Click a parent in the task list to collapse/expand its children — a viewing preference, not saved to the file. A parent's own bar is always computed from its children's dates (thinner, with flagged ends, so it reads as a rollup rather than a real task).

Dates — day-before-month throughout

st:28.sep.2026

day.month.year — fully explicit

st:28.sep

day.month — year defaults to the current year

st:dec.1549

month.year — resolves to the 1st of that month

st:09:00

Time of day only — date defaults to today

start:1.aug

Diagram-wide — see Year rollover below

• Month names are case-insensitive, matched on the first three letters (sep, Sep, september all work).

Year rollover — for a plan crossing a year boundary

start:1.aug

Declares which month/day the diagram's own year begins on

• Once set, any other year-less date earlier in the calendar than 1.aug (e.g. 10.jan) resolves to the following year — no need to write .2027 on every winter-side task. A date on or after 1.aug stays the base year.
• A date that already has an explicit year (st:10.jan.2027) is never affected. Diagram-wide, so it works no matter where in the file it's written — same as period:/endcaps:.

Segments, caps, and colour — per task

st:... round, end:... square

round / square / angle shapes that specific end — defaults to square

st:A, end:A

Same start and end draws a diamond instead of a bar

st:A, end:B, st:C, end:D

Two (or more) segments on one task's row

st:A, dur:3w

Start plus a duration — h/d/w/m/y for hours/days/weeks/months/years — instead of an end date

colour:blue

One colour per task, shared by every segment it draws

st:A, end:B, progress:60%

A percent-complete indicator drawn on that segment

• colour: green / blue / orange / red / grey / purple / yellow / teal / pink / indigo ("gray" also accepted) — same fixed palette as named styles' border:.
• A malformed st:/end:/dur:/colour:/progress: token (wrong delimiter or a value that doesn't parse) shows in red, right in the text.

Relative starts (Mac only for now)

st:follow, dur:5d

Starts the moment the previous dated task finishes

st:same, dur:1d

Starts alongside the previous dated task, not after it

st:follow-2d, dur:5d

2 days before the previous task ends — offset uses h/d/w/m/y, same as dur:

st:follow+1w, dur:5d

1 week after the previous task ends

id:Handover

Labels this task so other tasks can reference it by name

st:same(Handover), dur:1d

Starts alongside the task labelled id:Handover, wherever it is in the file

st:follow-2d(Handover), dur:1d

Offset and named reference together — offset always first

• Must be closed with dur:, never a fixed end: — that would stop it tracking the referenced task's own slip, so it's flagged red instead. Chains cascade automatically, so if an earlier task's date changes, every task that follows it moves too.
• Live in the Mac app today. This web editor's own parser has the same logic built in but switched off (ENABLE_RELATIVE_STARTS in gantt-parser.js) — a Mac App Store bonus over the free web version for now. Until it's switched on here, none of follow/same, the offset, or the named reference are recognized — the whole value just shows red, same as any other value that doesn't parse.

Title, footer, period, and end-cap defaults — whole diagram

title:My Plan, align:left

left / centre (or center) / right — defaults to centre

footer: Version 1.2 — printed [date]

Export-only — never shown in the live editor

period: weeks

hours / days / weeks / months / years — the width of each column

endcaps: st:round, end:angle

Default cap shape for any st:/end:/dur: with no cap of its own

• Period's also available as a toolbar dropdown — it edits this same line for you. Defaults to days if never set.
• Every row also shows a small reference number, counting from 1 — display-only, never saved to the file.

Late highlighting and the today marker

• A bar that should have started but hasn't kept pace (or finished with no progress at all) shows a red border, red label, and red progress line — a collapsed parent shows the same red if any real task underneath it is late.
• Only appears once the diagram uses progress: somewhere — a plan with no progress tracking never shows red, since there's no real signal to flag as behind. A thin dashed line also marks today, under every bar, regardless of progress tracking.

The centre topic is the first line

Trip Planning

The only unindented line — everything else nests under it

  Destination

Indent to make it a branch of the line above it

• A second unindented line doesn't start a second tree — it's adopted as one more branch of the centre, so nothing you write is ever lost.

Layout — radiates two-sided from the centre

• Main branches alternate left/right in file order: 1st right, 2nd left, 3rd right, and so on — deterministic, not a balancing algorithm.
• Click a branch with children to collapse/expand it — a viewing preference, not saved to the file. It still shows its own collapse triangle while collapsed.
• A node with children draws as a bordered box; a leaf (no children) draws as plain coloured text with no box, keeping the outermost level lightweight.
• Pinch, or hold Ctrl and scroll, to zoom in and out on a large tree.

Colour — the one place this format auto-colours by default

Destination

A main branch (direct child of the centre) with no colour: of its own gets one auto-assigned, round-robin, from the same 10-colour palette named styles use

Spain: colour:blue

Explicit colour, inherited by every node under Spain unless one of them overrides it too

• Anything deeper than a main branch — a node with no colour: of its own — always just inherits its parent's, never gets a fresh auto-assignment of its own.
• A plan that never writes colour: by hand still reads as visually distinct branches — the one deliberate exception to this format's usual "no colour unless you ask for it" rule.

Title and footer — whole diagram

title:My Plan, align:left

left / centre (or center) / right — defaults to centre. Independent of the centre topic itself.

footer: Version 1.2 — printed [date]

Export-only — never shown in the live editor

• A malformed colour: token (wrong delimiter or an unrecognized name) shows in red, right in the text.