Loading…
Loading…
Attributes sit in square brackets after a declaration, comma-separated. Most are positional: the value's vocabulary decides what it sets, so you rarely write a key.
| A value that looks like… | sets | vocabulary |
|---|---|---|
| a palette colour | color | blue green red orange violet teal pink yellow gray |
| a node shape | shape | rectangle ellipse diamond cylinder … (see reference) |
| a fill style | fill | pastel (default), bold, outline |
| a frame kind | frame | browser phone tablet window |
set/name or a known icon | icon | aws/lambda, tech/react, server, database |
Nine palette colours cover the diagram. A node with no colour draws in the neutral default.
Blue [rectangle, blue]
Green [rectangle, green]
Red [rectangle, red]
Orange [rectangle, orange]
Violet [rectangle, violet]
Teal [rectangle, teal]
Pink [rectangle, pink]
Yellow [rectangle, yellow]
Gray [rectangle, gray]
A hex colour ("#ff8800") or a CSS name (lightblue, crimson) maps to the
nearest palette hue, so pasted code keeps its intent.
Three fill styles set how a colour fills the shape. They are mutually exclusive;
pastel is the default.
Pastel [rectangle, blue]
Bold [rectangle, blue, bold]
Outline [rectangle, blue, outline]
A shadow flag adds a drop shadow. Unlike the fill styles it is orthogonal; it
composes with any of them.
Plain [rectangle, blue]
Shadowed [rectangle, blue, shadow]
Bold shadow [rectangle, blue, bold, shadow]
A shape word draws that outline; a set/name token (or a bare known icon name)
draws that pictogram. An icon on its own is a glyph with its label beneath. An
icon combined with a shape or colour draws the shape, with the icon riding the
corner as a badge.
Users [user]
Server [server, blue]
Files [aws/simple-storage-service]
Cache [cylinder, red]
Users -> Server -> Cache
Server -> Files
The icon catalog spans thousands of glyphs: cloud providers (aws/…, gcp/…,
azure/…), technologies (tech/react, tech/postgres), and a large general
set (server, database, user, lock). An unknown icon falls back to the
node's shape; it is never invented.
The mood/… set is six scored faces, worst to best: mood/awful, mood/bad,
mood/poor, mood/neutral, mood/good, mood/great. They carry their own
colour, because the colour is the score — a red frown and a green grin say the
same thing twice on purpose, so the rating survives greyscale printing and
red/green colour blindness.
flowchart
direction: right
loved = Loved it [icon: mood/great]
fine = Fine [icon: mood/neutral]
gave = Gave up [icon: mood/awful]
loved -> fine -> gave
They are the same geometry a journey plots on its curve, so a hand-built score row and a generated journey read alike. A journey still draws its own from the score rather than resolving these, so its expression can never disagree with its number.
Lucide's outline faces are also in the general set if you want a monochrome one
that takes the node's colour: smile, laugh, meh, frown, angry,
annoyed. Both families answer to mood, happy, sad, neutral, face and emotion in
the picker's search.
An explicit key: value is always available and wins over guessing. This is how
you put a queue icon on a queue-shaped node, or override a label.
Supported keys: icon, color, shape, fill (alias colorMode), frame,
label, labelColor (alias textColor), group, and link (aliases href,
url). Connectors also take head:. Wireframe controls take width: and
value: (alias active:).
label: overrides the displayed label without changing the name used in
references, handy for long or duplicated labels.labelColor: inks the label in a palette colour, independent of the fill.link: attaches an external URL. The properties panel opens it, ⌘-click
follows it, and SVG export wraps the shape in an anchor. Drawn nodes take one,
and so do sequence lifelines and ERD/class entity boxes.head: changes the mark at a connector's target end: circle (alias o,
dot) reads as "attaches to", cross (alias x) as "does not reach", and
arrow is the default chevron. It has to be keyed, because circle and
cross already name node shapes. On a bidirectional connector the mark is
drawn at both ends.db = Store [icon: cylinder, shape: queue, label: Message store]
Home [label: Landing page, link: https://koboyo.com]
Alert [diamond, labelColor: red]
flowchart
Client -> Gateway : call
Gateway -> Cache : reads [head: circle]
Gateway -> Legacy : blocked [red, head: cross]
Friendly words are accepted and normalized so pasted code and natural spellings both work:
box becomes rectangle, oval the stadium terminator ellipse,
decision a diamond, database/db/storage a cylinder, doc a document,
subroutine a predefined-process, offpage/off-page a pentagon, stop an
octagon, box3d a cube, ring/doublecircle a double-circle,
notched-rectangle a card, fork/join a fork-join bar,
documents/stacked-document a multi-document, processes/stacked-rectangle
a multi-process, lightning a bolt, cross a plus, crossedbox a crossbox.
(circle stays its own shape, a true circle with the label inside;
actor/person render the user pictogram rather than a drawn outline.)process becomes a rectangle, terminator/start/end an
ellipse, data/io a parallelogram, prep/preparation a hexagon.activity becomes a rectangle, event an ellipse, gateway a
diamond.grey becomes gray, purple becomes violet.aws-lambda) normalize to the catalog form
(aws:lambda).on/checked/true are on, off/unchecked/false off;
widths accept 1/2, 1/3, 2/3 alongside half, third, two-thirds.Unknown attribute words are diagnostics, not errors: the rest of the list still applies.
Decision [decision, orange]
Terminator [terminator, green]
Store [db, blue]
Decision -> Store