Mermaid Flowchart Online: Create Flow Diagrams

Mermaid Flowchart Syntax

Flowcharts are the most used Mermaid diagram type. They map out processes, decision trees, and system flows using nodes connected by edges. The syntax reads like a description of the graph: define nodes with their shapes, connect them with arrows, and optionally group them into subgraphs.

Direction

The first line sets the overall flow direction:

flowchart TD    %% top to bottom (default)
flowchart LR    %% left to right
flowchart RL    %% right to left
flowchart BT    %% bottom to top

Choose LR for horizontal process flows (timelines, pipelines). Choose TD for vertical hierarchies (org charts, decision trees). You can mix directions inside subgraphs.

Node Shapes

Node IDs must be unique within the diagram. The text inside the brackets is the displayed label. If you need special characters in the label, wrap it in quotes: A["Label with (parens)"].

Edge Types

A --> B        %% solid arrow
A --- B        %% solid line, no arrow
A -.-> B       %% dotted arrow
A -.- B        %% dotted line
A ==> B        %% thick arrow
A === B        %% thick line
A -->|label| B %% arrow with label
A -- text --> B %% alternate label syntax

Subgraphs

Group related nodes visually:

flowchart LR
    subgraph Backend
        direction TB
        API --> DB
        API --> Cache
    end
    subgraph Frontend
        UI --> API
    end

Subgraphs can be nested. Edges can cross subgraph boundaries. Each subgraph can override the parent’s direction with direction LR or direction TB.

Styling

Apply CSS classes or inline styles to individual nodes:

flowchart TD
    A[Critical] --> B[Normal]
    style A fill:#f43f5e,color:#fff,stroke:#e11d48
    classDef success fill:#10b981,color:#fff
    B:::success

style targets a single node by ID. classDef defines a reusable class. Apply classes with the :::className syntax.

Practical Patterns

Decision tree

flowchart TD
    Start --> Q1{Budget > $1000?}
    Q1 -- Yes --> Q2{Need speed?}
    Q1 -- No --> Budget[Use free tier]
    Q2 -- Yes --> Premium[Premium plan]
    Q2 -- No --> Standard[Standard plan]

Pipeline

flowchart LR
    Source --> Build --> Test --> Deploy --> Monitor

Error handling

flowchart TD
    Request --> Process{Success?}
    Process -- Yes --> Response[200 OK]
    Process -- No --> Retry{Retries left?}
    Retry -- Yes --> Process
    Retry -- No --> Error[500 Error]

Need to document an API flow? The Mermaid Sequence Diagram is built for request/response interactions. For database schemas, try the Mermaid ER Diagram.