Mermaid

What is Mermaid

Text-based diagramming language. Write plain text → get flowcharts, Gantt charts, timelines, mindmaps, ERDs, more.

Fast, portable, great in Markdown.

Official Links

• Docs: https://mermaid.js.org
• Live Editor (instant preview): https://mermaid.live
• GitHub: https://github.com/mermaid-js/mermaid

• VS Code Extension (best): https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview

• Gantt syntax: https://mermaid.js.org/syntax/gantt.html

VS Code Setup (macOS)

1. Open Extensions (⇧⌘X)
2. Install: Mermaid Preview
3. Create .md or .mmd
4. Use fenced block:
   ```mermaid
   …
   ```
5. Right-click → Open Preview to the Side
6. Export to PNG/SVG via command palette

Key Commands

• gantt → Gantt chart
• flowchart TD → top-down flowchart
• sequenceDiagram → sequence diagrams
• mindmap → mind maps
• timeline → compact timelines
• erDiagram → entity-relationship diagrams
• classDiagram → class diagrams

Gantt Basics

````markdown

gantt
  title Project Plan
  dateFormat  YYYY-MM-DD

  section Prep
  Research      :a1, 2025-12-01, 4d
  Planning      :after a1, 5d

  section Build
  Dev           :a2, 2025-12-10, 10d
  Testing       :after a2, 5d

**Modifiers**  
- `crit` → critical path  
- `done` → completed  
- `active` → in progress  
- `milestone` → milestone marker  

## Common Date Formats
- `YYYY-MM-DD`  
- `DD-MM-YYYY`  
- `MM/DD/YYYY`

## Flowchart Quickie
````markdown
```mermaid
flowchart TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Proceed]
  B -->|No| D[Stop]

Timeline Example

timeline
  title Evolution
  2023 : Launch
  2024 : Iteration
  2025 : Expansion

Mindmap Example

mindmap
  root(Mermaid)
    Syntax
    Diagrams
      Gantt
      Flowchart
      Timeline

Tips
• Use .mmd for complex diagrams
• Keep diagrams small → easier to preview in VS Code
• Dark/light theme matches your VS Code theme automatically
• For presentations: export as SVG → drop into PowerPoint