Language reference

Every canonical word the compiler accepts. Aliases (see attributes) normalize onto these.

Diagram families#

architecture · flowchart · bpmn · orgchart · statemachine · sequence · erd · class · wireframe · mindmap · chart

Aliases: org (orgchart), state / fsm (statemachine), uml (class).

Directives#

title · direction · icons · colorMode

Colours#

blue · green · red · orange · violet · teal · pink · yellow · gray

Fill styles#

pastel (default) · bold · outline

Flags#

shadow (node: a drop shadow, composes with any fill) · flow (edge: animates it as a live data flow)

Frames#

browser · phone · tablet · window

Node shapes#

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

Edge connectors#

-> · <- · <-> · --> · <-- · <-->

ERD cardinalities#

1:1 · 1:N · N:1 · N:M

Class relationships#

--|> inheritance · ..|> realization · *-- composition · o-- aggregation · ..> dependency. Each has a mirror spelling (<|--, --*, …). See class diagrams.

Member visibility#

+ public · - private · # protected · ~ package (class and ERD fields).

Wireframe controls#

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

Wireframe widths#

full (default) · half · third · two-thirds

Chart types#

bar · line · area · scatter · pie · donut · radar

Attribute keys#

icon · color · shape · fill · frame · label · labelColor · group · link · width · value (wireframe)

Every diagram on these pages is compiled live from the code above it, through the same pipeline the app uses. Open the canvas to try it.