Mermaid Flowchart

calendarDec 12, 2024 · 2 min read · mermaid flowchart diagram visualization diagrams  ·
Share on: linkedincopy

Mermaid flowcharts are perfect for visualizing processes, algorithms, and decision trees. They're text-based, version-control friendly, and render beautifully.

Use Case

Use flowcharts when you need to:

  • Document algorithms or processes
  • Show decision logic
  • Map out workflows
  • Visualize state transitions

Code

1```mermaid
2graph TD
3    A[Start] --> B{Decision?}
4    B -->|Yes| C[Action 1]
5    B -->|No| D[Action 2]
6    C --> E[End]
7    D --> E
8```

Result:

Explanation

  • graph TD - Top-down flowchart (use LR for left-right, BT for bottom-top)
  • [] - Rectangle node
  • {} - Diamond (decision) node
  • () - Rounded rectangle
  • --> - Arrow
  • -->|text| - Arrow with label

Examples

Example 1: Research Process

 1```mermaid
 2graph TD
 3    A[Research Question] --> B{Literature<br/>Review Done?}
 4    B -->|No| C[Read Papers]
 5    C --> B
 6    B -->|Yes| D[Form Hypothesis]
 7    D --> E[Design Experiment]
 8    E --> F[Run Experiment]
 9    F --> G{Results<br/>Significant?}
10    G -->|Yes| H[Document Findings]
11    G -->|No| I[Refine Approach]
12    I --> E
13    H --> J[Publish]
14```

Result:

Example 2: Algorithm Flow

 1```mermaid
 2graph LR
 3    A[Input Data] --> B[Preprocess]
 4    B --> C[Feature Extraction]
 5    C --> D[Model Training]
 6    D --> E[Validation]
 7    E --> F{Accuracy > 95%?}
 8    F -->|No| G[Tune Hyperparameters]
 9    G --> D
10    F -->|Yes| H[Deploy Model]
11```

Result:

Example 3: Node Shapes

 1```mermaid
 2graph TD
 3    A[Rectangle] --> B(Rounded)
 4    B --> C([Stadium])
 5    C --> D[[Subroutine]]
 6    D --> E[(Database)]
 7    E --> F((Circle))
 8    F --> G>Asymmetric]
 9    G --> H{Diamond}
10    H --> I{{Hexagon}}
11```

Result:

Notes

  • Use <br/> for line breaks in node text
  • Keep node IDs simple (A, B, C or descriptive names)
  • Use subgraphs for grouping related nodes
  • Test complex diagrams at https://mermaid.live/

Gotchas/Warnings

  • ⚠️ Special characters: Avoid quotes in node text, use #quot; if needed
  • ⚠️ Spacing: Extra spaces in node IDs can cause issues
  • ⚠️ Circular references: Be careful with loops, they can make diagrams hard to read
  • ⚠️ Complexity: Very large flowcharts become hard to maintain - consider breaking them up

Related Snippets