Mermaid flowchart syntax: nodes, edges and subgraphs with examples

Flowcharts map a process: steps as nodes, control flow as edges. Mermaid's flowchart is the most-used diagram type, and the one most documents reach for when they need a decision path, an approval chain, or a deployment pipeline.

Everything on this page is rendered by makesPDF's own Mermaid renderer — the same code that draws the diagram when a ```mermaid block goes through POST /api/v1/md.

Direction

The first line names the type and a direction: flowchart TD (top-down), LR (left to right), RL, BT, or TB (an alias for top-down). Pick the direction that fits the space; LR suits pipelines and timelines, TD suits decisions.

Nodes and edges

A node is an id plus a label — A[Label]. An edge is -->. Write them together, and Mermaid creates the nodes:

flowchart TD
  A[Start] --> B{Ready?}
  B -->|Yes| C[Ship it]
  B -->|No| A

B{Ready?} is a diamond — conventional for a decision. Edge labels go between pipes: B -->|Yes| C.

Node shapes

The bracket style picks the shape: A[Rect], A(Rounded), A([Stadium]), A[[Subroutine]], A[(Database)], A((Circle)), A{{Hexagon}}, A>Asymmetric]. Chains compress the common path:

flowchart LR
  A(Rounded) --> B([Stadium]) --> C[[Subroutine]] --> D[(Database)]
  D --> E((Circle)) --> F{{Hexagon}}

Edge styles

Four line styles cover most needs, and an edge can carry a label:

flowchart LR
  A -.-> B
  B ==> C
  C --x D
  D --o E
  E -->|label| F

• -.-> dotted, ==> thick.
• --x ends in a cross, --o in a circle.
• --- is an open line with no arrowhead; -- label --- labels it.

Subgraphs

subgraph groups nodes into a labelled box — one per team, service, or stage:

flowchart TB
  subgraph Client
    UI[Web app]
  end
  subgraph API
    Router[Router] --> Renderer[Renderer]
  end
  UI --> Router

Edges can connect nodes across subgraphs. Mermaid also lets a subgraph sit inside another one; makesPDF draws every subgraph as its own top-level box, so a nested subgraph appears beside its parent rather than inside it (see the note below).

Not supported in makesPDF yet: nested subgraphs are not drawn — every subgraph is rendered as a top-level box, so an inner subgraph appears beside its parent instead of inside it. classDef, style and linkStyle statements are parsed but not painted — nodes render in theme colours. click interactions have no meaning in a PDF.