Mermaid Flowchart

mermaidCopy

flowchart TD
    A([User opens app]) --> B{Signed in?}
    B -- Yes --> C[Load dashboard]
    B -- No --> D[Show login form]
    D --> E[/Enter credentials/]
    E --> F{Valid?}
    F -- Yes --> C
    F -- No --> G[Show error]
    G --> D
    C --> H[(Fetch data from DB)]

Open in the live editor

A Mermaid flowchart turns a few lines of plain text into a clean process diagram. You declare nodes, connect them with arrows, and Mermaid lays everything out automatically, so you never have to drag boxes around or fix crooked connectors again.

Flowcharts are the most popular Mermaid diagram type because they work everywhere: README files on GitHub and GitLab, Notion and Obsidian notes, Confluence pages, technical design docs and pull-request descriptions. Because the source is text, a flowchart lives next to your code, diffs cleanly in version control and stays easy to update.

When to use a flowchart

• Documenting business processes and approval workflows
• Explaining algorithms and decision logic in code reviews
• Onboarding guides and support troubleshooting trees
• CI/CD pipelines and deployment runbooks

Flowchart syntax reference

Flowchart examples

mermaidCopy

flowchart LR
    subgraph Build
      A[Commit] --> B[Install deps] --> C[Run tests]
    end
    subgraph Deploy
      D[Build image] --> E[Push to registry] --> F[Roll out]
    end
    C -->|tests pass| D
    C -.->|tests fail| X[Notify team]

Open in the live editor

mermaidCopy

flowchart TD
    Q{Bug reproducible?} -->|Yes| W[Write failing test]
    Q -->|No| I[Ask for more info]
    W --> F[Fix and open PR]
    F --> R{Review approved?}
    R -->|Yes| M[Merge]:::ok
    R -->|No| F
    classDef ok fill:#d1fae5,stroke:#059669,color:#064e3b

Open in the live editor

Tips and best practices

• Pick the direction that matches reading order: LR for pipelines and timelines, TD for hierarchies and decision trees.
• Keep node ids short (A, B, login) and put the human text in the label — ids must be unique and cannot contain spaces.
• Wrap labels containing special characters such as parentheses or quotes in double quotes: A["Call api(v2)"].
• Avoid the bare word end in lowercase as a node label — it closes subgraphs. Use End or "end" instead.
• If the layout gets tangled, split the diagram into subgraphs or several smaller diagrams.

Generate a flowchart with AI

Not sure where to start? Describe what you need and the AI flowchart generator writes the Mermaid code for you. Try prompts like:

• “User signup flow with email verification and error handling”
• “Order fulfilment process from checkout to delivery”
• “Incident response runbook for a production outage”

Flowchart templates