Flowchart shapes and icons (Mermaid v11)

Field	Value
Type	Skill Resource
Source	~/.copilot/skills/technical-writing/references/mermaid/flowchart-shapes-and-icons.md
Description	Not specified

Source Content

Flowchart shapes and icons (Mermaid v11)

Current flowchart syntax, including the features Mermaid added in v11. Source of truth: the upstream docs at <https://mermaid.ai/open-source/syntax/flowchart.html> — check there when something here looks stale. Verified against Mermaid 11.16.0 in July 2026.

Expanded node shapes (@{ shape: ... }, v11.3.0+)

The typed-shape syntax names a shape instead of encoding it in brackets. It is clearer than the classic bracket forms and unlocks ~30 shapes the old syntax could not express.

flowchart TD
  A@{ shape: rect, label: "Process" }
  B@{ shape: diam, label: "Decision" }
  C@{ shape: cyl, label: "Database" }
  A --> B --> C

Common shapes and their aliases:

Meaning	shape: value	Aliases	Classic form
Process	rect	rectangle, proc	[text]
Decision	diam	diamond, question	{text}
Rounded	rounded	-	(text)
Stadium	stadium	pill	([text])
Subroutine	subproc	framed-rectangle	[[text]]
Database	cyl	cylinder, db	[(text)]
Start / end	circle	circ	((text))
Document	doc	document	-
Data store	datastore	bow-rect	-

The classic bracket shapes still work everywhere and stay the right choice for the five core shapes (see diagram-principles.md principle 8). Reach for @{ shape: ... } when you need a shape the brackets cannot draw.

Inline icons in labels — the house default

The house style puts a monotone FontAwesome icon inline at the start of the node label, keeping the box, fill, shape, and grouping intact:

flowchart LR
  A["fas:fa-user Resident"] --> B["fas:fa-database Case store"] --> C["fas:fa-circle-check Done"]

Prefixes: fas: (solid) for almost everything, fab: for brand marks (fab:fa-github). Inline tokens render only where the FontAwesome stylesheet is loaded and htmlLabels is on; an unloaded pack prints the literal text (fas:fa-user), which is the tell that the stylesheet is missing. Which surface loads what, and the full concept→token map, live in icons-and-surfaces.md.

Icon nodes (@{ shape: icon }, v11.3.0+) — not the house style

Mermaid can also draw a registered pack icon as the node, replacing the box. The house style does not use this — it drops the label to loose text beneath a bare glyph and destroys the box-and-fill design (see icons-and-surfaces.md). Documented here only so the syntax is recognisable:

flowchart LR
  A@{ shape: icon, icon: "fa:user", label: "Resident" }

Icon-node fields, one per line:

• icon: the pack-qualified name, e.g. "fa:user".
• label: the text under (or beside) the icon.
• form: optional background — square, circle, or rounded.
• pos: optional label position — t (top) or b (bottom).
• h: optional icon height in px; minimum 48.

Keep icon nodes on a single line — the @{ ... } block does not span lines.

Image nodes (@{ img: ... })

flowchart TD
  A@{ img: "https://example.com/logo.png", label: "Vendor", pos: "b", w: 60, h: 60, constraint: "on" }

Use sparingly — a remote image will not render on an offline or CSP-restricted surface, and never in black-and-white print.

Arrows and edges

Classic arrows are unchanged:

Syntax	Meaning
A --> B	Arrow
A --- B	Open link
A -->|text| B	Labelled arrow
A -.-> B	Dotted
A ==> B	Thick

Newer edge forms:

• Circle and cross ends: A --o B and A --x B (bidirectional: A o--o B, A x--x B).
• Bidirectional arrows: A <--> B, thick A <==> B.
• Edge IDs for styling or animation (v11.10.0+): give an edge an id with e1@, then style it.

flowchart LR
  A e1@--> B
  A e2@--> C

Markdown labels

Labels accept markdown inside backticks, with auto-wrapping on by default:

flowchart TD
  A["`**Submitted** and awaiting review`"]

Gotchas

• end as a node id breaks the parser — capitalise it (End) or rename it.
• A node id starting with o or x right after an edge can be read as an --o / --x edge end. Add a space or capitalise: A --> Ox is fine; A-->ox is risky.
• Quote any label with spaces, punctuation, or a colon: A["Label: value"].
• Icon/image @{ ... } blocks must stay on one line.