Mermaid flowchart syntax: a practical guide

Mermaid lets you describe diagrams in plain text and render them as clean graphics. Here are the building blocks, with examples you can paste straight into the editor.

A Mermaid flowchart starts with the flowchart keyword and a direction, then a list of nodes and the arrows connecting them. Paste any of these into the MD-Vis editor inside a mermaid code fence to see them render live.

Direction

Set the layout direction after flowchart: TD (top-down), LR (left-right), RL or BT.

flowchart LR
    A --> B --> C

Node shapes

flowchart TD
    A[Rectangle]
    B(Rounded)
    C{Decision}
    D([Stadium])
    E[(Database)]

Edges and labels

flowchart LR
    A --> B
    A --- C
    A -->|yes| D
    A -.-> E
    A ==> F

Subgraphs

flowchart TB
    subgraph Frontend
        UI --> State
    end
    subgraph Backend
        API --> DB
    end
    State --> API

Styling with classes

flowchart LR
    A[Input]:::in --> B[Output]:::out
    classDef in fill:#e1f5fe,stroke:#01579b
    classDef out fill:#e8f5e9,stroke:#2e7d32

Once your diagram looks right, export the whole document to PDF, PNG, Word or PowerPoint — the diagram travels with it.