Diagrams

A ```mermaid fenced block is turned into a self-contained SVG at build time — no client-side Mermaid, no headless browser. Every diagram below uses the site's own CSS tokens, so it flips with light/dark automatically, like the rest of the page. Source lives in lib/mermaid.ts; the styleguide (Style Guide) has the one-paragraph version.

Flowchart

Branches, labels, and a decision node. Directions: TD (top-down), LR (left-right), BT, RL.

Node shapes

The same graph syntax, different brackets per shape.

Subgraphs

Group related nodes with subgraph … end.

Coloured edges

Diagrams are monochrome by design — they inherit the page's foreground / border tokens. To tint one connection, use linkStyle (works in flowcharts and state diagrams). Edges are numbered from 0 in source order; set stroke to a hex or a theme token (var(--destructive)) so the colour still flips with dark mode, plus an optional stroke-width.

To recolour every diagram at once, edit the COLORS map in lib/mermaid.ts (e.g. give accent a colour — it drives arrowheads and XY-chart series). See How colours work at the bottom.

State diagram

[*] is the start / end. Labels after : annotate transitions.

Sequence diagram

->> is a solid (sync) call, -->> a dashed (return) message.

Class diagram

Fields, methods, and inheritance (<|--).

ER diagram

Entity relationships with crow's-foot cardinality.

XY charts

xychart-beta does bar, line, combined, and horizontal charts. Series colour comes from the theme's accent.

Bar:

Line (smooth spline):

Bar + line together:

Horizontal (categories on the y-axis):

How colours work

The renderer (lib/mermaid.ts) hands beautiful-mermaid a small COLORS map of CSS-variable references, not hex values:

Role	Token	Used for
bg	var(--background)	canvas (kept transparent)
fg	var(--foreground)	text
line / border	var(--border)	connectors, node outlines
accent	var(--foreground)	arrowheads, XY-chart series
muted	var(--muted-foreground)	secondary text
surface	var(--muted)	node fill tint

Because those are the same tokens the whole UI uses, the SVG re-themes itself in dark mode with no JavaScript. Two ways to add colour:

1. One edge → linkStyle <index> stroke:<colour>,stroke-width:<n>px inside the diagram (see Coloured edges). Prefer var(--token) over a raw hex so it keeps flipping with the theme.
2. All diagrams → change the COLORS map in lib/mermaid.ts. To stay dark-mode-safe, add a token (e.g. --diagram-accent) with light + dark values in app/globals.css and point accent at it, rather than hard-coding a hex.