Loading…
Loading…
Every canonical word the compiler accepts. Aliases (see attributes) normalize onto these.
architecture · flowchart · bpmn · orgchart · statemachine ·
sequence · erd · class · wireframe · mindmap · gitgraph · gantt ·
sankey · timeline · journey · cycle · funnel · pyramid · venn ·
matrix · chart
Aliases: graph (architecture), flow (flowchart), org (orgchart), state /
fsm (statemachine), uml (class). Architecture is the default: a document with
no family header is a graph.
title · direction · icons · colorMode
Sequence-only: activate / deactivate, note lines, and the brace blocks
below.
Block openers: group <name> { … } is a container in the graph families AND in
erd / class, where it draws a namespace/schema frame around the entities
declared inside it. screen opens a wireframe screen.
Infographic-only: x / y (matrix axis end labels, low | high),
overlap a + b: label lines (venn intersections), and section <name> lines
(journey bands, running until the next section).
Git-graph-only lines: commit · branch · checkout (alias switch) · merge ·
cherry-pick, with [tag: …], [highlight], [reverse] and [label: …].
Sankey-only: one flow per line, From -> To : value (the Mermaid CSV form
From, To, value is accepted too).
Gantt-only: section <name> bands, the excludes: weekends directive (lengths
are then counted in working days and no bar starts on a weekend), and the task
schedule - label: <date> | after <task>, <length> | until <task>, with
[done] · [active] · [critical] (alias crit) · [milestone]. Lengths take
d / w / h / m / s suffixes and normalize onto days.
right · down · left · up
The value of direction:. Flowcharts, BPMN and org charts default to down;
architecture and state machines to right.
blue · green · red · orange · violet · teal · pink · yellow ·
gray
pastel (default) · bold · outline
rounded · sharp — a shape's corners. Accepts round and square as
aliases. A rectangle is rounded unless squared; the straight-edged polygons
(diamond, triangle, parallelogram, trapezoid, hexagon, pentagon,
octagon, chevron) are sharp unless rounded. Shapes whose corners belong to
their own silhouette — a star's points, anything curved — ignore it.
Gateway [sharp]
Cache [corner: rounded]
shadow (node: a drop shadow, composes with any fill) · flow (edge: animates
it as a live data flow) · invisible (alias hidden; edge: ranks the layout and
draws nothing)
browser · phone · tablet · window
rectangle · ellipse · circle · diamond · cylinder · queue ·
callout · hexagon · parallelogram · trapezoid · triangle · cloud ·
star · speech-bubble · note · sticky · document ·
predefined-process · manual-input · pentagon · chevron · octagon ·
cube · actor · double-circle · card · delay · fork-join ·
multi-document · multi-process · package · component · brace ·
checkbox · crossbox · heart · bolt · plus · arrow-up ·
arrow-down · arrow-left · arrow-right
-> · <- · <-> · --> · <-- · <-->
Solid forms are single-dashed, --> and <--> are dashed. A leading <
reverses or doubles the head.
arrow (default chevron) · circle (aliases o, dot) · cross (alias x)
Written as the head: key on a connector (A -> B: [head: circle]), never as a
bare word — circle and cross already name node shapes. On a bidirectional
connector the mark is drawn at both ends.
Coarse: 1:1 · 1:N · N:1 · N:M
Full crow's-foot, one mark per end (-- solid / .. dashed): || exactly one ·
|o / o| zero or one · }| / |{ one or many · }o / o{ zero or many,
e.g. ||--o{.
--|> inheritance · ..|> realization · *-- composition · o-- aggregation
· ..> dependency · a plain -- association (the default when no mark is
given). Each has a mirror spelling (<|--, --*, …). See
class diagrams.
+ public · - private · # protected · ~ package (class and ERD fields).
button · input · search · checkbox · radio · toggle · dropdown ·
slider · navbar · tabs · image · avatar · heading · paragraph ·
divider · link · textarea · stepper · badge · progress ·
breadcrumbs · pagination · rating · card · list · alert · menu ·
tooltip · accordion · datepicker · sidebar · scrollbar · segmented ·
tabbar · statusbar · fab · stepbadge
full (default) · half · third · two-thirds
bar (aliases column, xy, xychart) · line · area · scatter · pie ·
donut (alias doughnut) · radar · quadrant
loop <condition> { … } · alt <condition> { … } else { … } ·
opt <condition> { … } · par <label> { … } and <label> { … } ·
break <condition> { … }
Each is drawn as a labelled frame around the messages inside it, and they nest. See sequence diagrams.
info · success · warning · error
The variant of a wireframe alert control (Alert [alert, error]).
icon · color · shape · fill · frame · label · labelColor ·
group · link · head (edge) · width · value (wireframe) · score
(journey step)