How to Draw Flowcharts in Mermaid

2026-03-04 · MermZen Tutorial

Flowcharts visualize process steps and decision paths, making them ideal for user flows, approval processes, or algorithm descriptions. Mermaid uses either graph or flowchart keywords for flow diagrams.

Why Use Flowcharts?

Flowcharts excel at clearly expressing process steps and decision paths. Compared to plain text descriptions, flowcharts can:

• Visually display branching logic, avoiding missed edge cases
• Help team members quickly understand business rules
• Serve as development documentation, reducing communication costs

Ideal Use Cases:

• User flows: login, registration, checkout processes
• Business approval logic: leave requests, expense approvals
• Algorithm flows: search, sort, calculation logic

Practical Use Cases

User Flow Example

User login flow is the most common flowchart application, clearly showing validation, error handling, and success redirect branches:

graph TD
    A([Start]) --> B[User enters credentials]
    B --> C{Account exists?}
    C -->|No| D[Show error]
    D --> B
    C -->|Yes| E{Password valid?}
    E -->|No| F[Increment fail count]
    F --> G{Fails ≥ 3?}
    G -->|Yes| H[Lock account 30 min]
    G -->|No| B
    E -->|Yes| I[Generate Session Token]
    I --> J[Redirect to dashboard]
    J --> K([End])

Business Approval Example

Leave approval flow demonstrating multi-level approval logic:

graph TD
    A([Start]) --> B[Submit leave request]
    B --> C{Days ≤ 3?}
    C -->|Yes| D[Direct supervisor approves]
    C -->|No| E[Department manager approves]
    D --> F{Approved?}
    E --> F
    F -->|Yes| G[Update attendance system]
    F -->|No| H[Notify rejection]
    G --> I([End])
    H --> I

Algorithm Flow Example

Binary search algorithm flowchart:

graph TD
    A([Start]) --> B[Initialize left=0, right=n-1]
    B --> C{left ≤ right?}
    C -->|No| D[Return -1 not found]
    C -->|Yes| E[Calculate mid = left + right / 2]
    E --> F{arr[mid] == target?}
    F -->|Yes| G[Return mid]
    F -->|No| H{arr[mid] < target?}
    H -->|Yes| I[left = mid + 1]
    H -->|No| J[right = mid - 1]
    I --> C
    J --> C
    D --> K([End])
    G --> K

Declaring a Chart

graph TD

Direction parameters:

Node Shapes

graph TD
    A[Rectangle]
    B(Rounded rect)
    C{Diamond}
    D((Circle))
    E([Stadium / pill])
    F[[Subroutine]]
    G[(Database)]

Node Shape Selection Guide

Choosing the right node shape makes flowcharts more readable:

Selection Tips:

• Every flowchart should have clear start and end nodes (stadium shape)
• Use diamonds for decisions, with labeled exits (yes/no, success/fail)
• Use rectangles for regular processing steps
• Avoid overusing special shapes to keep diagrams clean

Connector Types

graph LR
    A --> B
    A --- C
    A -.-> D
    A ==> E
    A --label--> F
    A -->|label| G

Subgraphs

graph TD
    subgraph Frontend
        A[UI Layer] --> B[Validation]
    end
    subgraph Backend
        C[API] --> D[Database]
    end
    B --> C

Best Practices

1. Limit Decision Nodes Per Layer

Keep decision nodes to no more than 2 per layer to avoid overly complex flowcharts:

graph TD
    A[Start] --> B{Condition 1?}
    B -->|Yes| C{Condition 2?}
    B -->|No| D[Process A]
    C -->|Yes| E[Process B]
    C -->|No| F[Process C]

If more decisions are needed, consider splitting into multiple sub-flows or using subgraphs.

2. Always Label Branch Exits

Every decision node branch should have a clear label:

graph LR
    A{Login success?} -->|Yes| B[Go to home]
    A -->|No| C[Show error]

Recommended labels: Yes/No, Success/Fail, Approved/Rejected, Valid/Invalid

3. Use Subgraphs to Group Related Nodes

Group related nodes with subgraph for better readability:

graph TD
    subgraph Client
        A[User Request] --> B[Authentication]
    end
    subgraph Server
        C[API Gateway] --> D[Business Logic]
        D --> E[Database]
    end
    B --> C

4. Maintain Consistent Flow Direction

• Top to bottom (TD): Most common, suitable for most business flows
• Left to right (LR): Good for state machines, data pipelines, timelines

Avoid mixing multiple directions in the same diagram.

Comparison with Other Diagrams

Selection Guide:

• Need to show decision branches? → Flowchart
• Need to show interaction order between objects? → Sequence Diagram
• Need to show state changes of a single object? → State Diagram

Full Example: User Login Flow

graph TD
    A([Start]) --> B[User enters credentials]
    B --> C{Account exists?}
    C -->|No| D[Show error]
    D --> B
    C -->|Yes| E{Password valid?}
    E -->|No| F[Increment fail count]
    F --> G{Fails ≥ 3?}
    G -->|Yes| H[Lock account 30 min]
    G -->|No| B
    E -->|Yes| I[Generate Session Token]
    I --> J[Redirect to dashboard]
    J --> K([End])

To try the above code in MermZen, click Open Editor and paste the code there.