How to Create a Flowchart in Mermaid (Step by Step)

Flowcharts are the easiest way to start with Mermaid. In this tutorial you'll build a complete flowchart for a password reset process, one concept at a time. Open the online editor in another tab and follow along.

Step 1: Choose a direction

Every flowchart begins with the flowchart keyword and a direction: TD (top-down), LR (left-right), BT or RL. Top-down suits decision trees; left-right suits pipelines.

flowchart TD

Step 2: Add nodes and shapes

A node is an id followed by a label in brackets. The bracket style sets the shape:

Step 3: Connect nodes with arrows

Use --> for an arrow, --- for a plain line, -.-> for dotted and ==> for thick. Add a label in the middle with -- text --> or -->|text|.

flowchart TD
    A([Forgot password]) --> B[/Enter email/]
    B --> C{Account exists?}
    C -- Yes --> D[Send reset link]
    C -- No --> E[Show generic message]
    D --> F[User sets new password]
    F --> G([Done])

Step 4: Group steps with subgraphs

Subgraphs draw a box around related nodes. They're ideal for showing which system or team owns which steps.

flowchart LR
    subgraph Browser
      A[Reset form] --> B[Submit]
    end
    subgraph Server
      C[Validate token] --> D[Hash password] --> E[(Save)]
    end
    B --> C

Step 5: Style your flowchart

Define reusable styles with classDef and attach them with :::. You can also change the whole look with a Mermaid theme.

flowchart TD
    A[Request] --> B{Valid?}
    B -->|Yes| C[Success]:::ok
    B -->|No| D[Error]:::bad
    classDef ok fill:#dcfce7,stroke:#16a34a
    classDef bad fill:#fee2e2,stroke:#dc2626

Step 6: Export and share

In the editor, use Export to download a PNG (choose scale and background), an SVG for crisp vector output, or a PDF. Share creates a link that opens the diagram in the editor, and signed-in users can publish an embeddable version.

Common flowchart mistakes

• Using end in lowercase as a label — it closes subgraphs. Write End instead.
• Special characters in labels — wrap them in quotes: A["Price (USD)"].
• Duplicate ids with different labels — the last label wins and arrows connect to the same node.

More fixes are in our guide to Mermaid syntax errors, and the full syntax is on the flowchart reference page.