Mermaid Flowchart Tutorial

Basic Syntax

Flowcharts are composed of Nodes and Edges.

Node Shapes

You can define different node shapes using various brackets:

Code Example:

graph LR
    id1[Rectangle]
    id2(Rounded)
    id3{Diamond}
    id4((Circle))

Rendered Result:

graph LR
    id1[Rectangle]
    id2(Rounded)
    id3{Diamond}
    id4((Circle))

Connection Styles

Mermaid supports multiple ways to connect nodes:

Code Example:

graph TD
    A --> B
    C --- D
    E -- Description --> F
    G -.-> H
    I ==> J

Rendered Result:

graph TD
    A --> B
    C --- D
    E -- Description --> F
    G -.-> H
    I ==> J

Subgraphs

You can group related nodes within subgraphs:

Code Example:

graph TB
    subgraph Client
        C1[Browser]
        C2[App]
    end
    subgraph Server
        S1[API Server]
        S2[Database]
    end
    C1 --> S1
    S1 --> S2

Rendered Result:

graph TB
    subgraph Client
        C1[Browser]
        C2[App]
    end
    subgraph Server
        S1[API Server]
        S2[Database]
    end
    C1 --> S1
    S1 --> S2

Practice Now

Go to our Mermaid Online Editor to try the syntax above. With practice, you’ll quickly master the art of creating professional flowcharts.