Mermaid Flowchart Syntax

What a Mermaid flowchart is for

A flowchart shows steps as nodes joined by arrows: processes, decisions and the paths between them. It is the most used Mermaid diagram and also covers architecture sketches and dependency graphs. flowchart and graph are the same diagram; flowchart is the newer keyword and supports more features.

Flowchart syntax

Basic example

flowchart TD
    A[Start] --> B{Is it working?}
    B -- Yes --> C[Ship it]
    B -- No --> D[Debug]
    D --> B
    C --> E((Done))

Open this example in the Mermaid editor

More flowchart examples

Login flow with decisions

Diamonds for decisions, labeled arrows for each answer and a loop back for retries.

flowchart TD
    start([User opens app]) --> session{Valid session?}
    session -- Yes --> home[Show dashboard]
    session -- No --> login[Show login form]
    login --> submit[/Submit email and password/]
    submit --> check{Credentials OK?}
    check -- Yes --> mfa{MFA enabled?}
    check -- No --> err[Show error] --> login
    mfa -- Yes --> code[Ask for code] --> home
    mfa -- No --> home

Open “Login flow with decisions” in the editor

Architecture with subgraphs

Subgraphs group services; LR lays the system out left to right, and cylinders mark data stores.

flowchart LR
    user((User)) --> cdn[CDN]
    cdn --> lb[Load balancer]
    subgraph app [Application tier]
        lb --> api1[API 1]
        lb --> api2[API 2]
    end
    subgraph data [Data tier]
        db[(PostgreSQL)]
        cache[(Redis)]
    end
    api1 & api2 --> db
    api1 & api2 -.-> cache

Open “Architecture with subgraphs” in the editor

Styled nodes

classDef defines a reusable style; :::name applies it to a node.

flowchart LR
    classDef ok fill:#d1fae5,stroke:#059669,color:#064e3b
    classDef bad fill:#fee2e2,stroke:#dc2626,color:#7f1d1d
    build[Build]:::ok --> test[Test]:::ok --> deploy[Deploy]:::bad
    deploy -. rollback .-> build

Open “Styled nodes” in the editor

Common mistakes

• The word end in lowercase breaks a flowchart, because it closes subgraphs. Write End or END, or put it in quotes: A["end"].
• Node text with parentheses, brackets or other special characters needs quotes: A["Call api(id)"].
• A node starting with o or x right after a link (A---oB) becomes a circle or cross edge. Add a space or capitalize: A--- oB.
• Define a node’s shape once, the first time it appears; later lines can use just its id.

Use it in Markdown

```mermaid
flowchart TD
    A[Start] --> B{Is it working?}
    B -- Yes --> C[Ship it]
    B -- No --> D[Debug]
    D --> B
    C --> E((Done))
```

GitHub, GitLab, Azure DevOps, Obsidian, Notion and docs generators such as Docusaurus and MkDocs (with a plugin) draw fenced mermaid blocks. Check it locally in the Markdown preview.

Other Mermaid diagrams

• Mermaid sequence diagram syntax
• Mermaid class diagram syntax
• Mermaid state diagram syntax
• Mermaid er diagram syntax
• Mermaid gantt chart syntax
• Mermaid pie chart syntax
• Mermaid mindmap syntax
• Mermaid timeline syntax
• Mermaid git graph syntax
• Mermaid user journey syntax
• Mermaid quadrant chart syntax
• Mermaid xy chart syntax

Sources

• Mermaid docs: Flowchart

Spotted a mistake? Email hello@devtoolsmith.com and we’ll fix it.

Frequently asked questions