Flowchart diagrams

Best for branching logic — decisions, steps, and the paths between them.

flowchart TD
  start([Start]) --> ok{OK?}
  ok -->|yes| go[Proceed]
  ok -->|no| stop[Halt]
  subgraph Backend
    api[API] --> db[(Postgres)]
  end

Shapes: [rect] (rounded) ([stadium]) [[subroutine]] [(database)] ((circle)) {diamond} {{hexagon}} >banner] (asymmetric/flag) [/parallelogram/] [\alt\] (mirrored parallelogram) [/trapezoid\] [\alt/] (trapezoid variants) (((double circle))). Links: --> --- -.-> ==> <--> <-- (reverse) --o --x (circle / cross arrowhead) o-- x-- (glyph at the source end) o--o x--x (glyph at both ends) ~~~ (invisible, for layout), labels via -->|text| or inline A -- text --> B. Chain several nodes at once with A & B --> C & D.

flowchart TB / LR set the flow direction; BT (upward) and RL (leftward) are the reversed variants (TD is an alias for TB). subgraph Name … end groups nodes; subgraph id[Title] gives the group an explicit id, so a desc / pos / style directive can target it by name instead of a positional group0.

Labels are plain text — don’t put HTML in them. vizzy tolerates <br> so pasted Mermaid still renders, but reach for a desc subtitle instead; other tags (<sub>, <span>, …) render literally. There’s no thick-bidirectional edge, so write <-->, never <==> (which leaks a stray node). vizzy lint flags both.

Flowcharts are the only diagrams that accept Mermaid styling (style / classDef / class / :::). linkStyle (edge styling) is flowchart-only too.