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}}. Links: --> --- -.-> ==> <-->, labels via -->|text| or inline A -- text --> B.

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 / :::).