Mermaid Diagrams

SpecDown renders Mermaid diagrams natively in the live preview. Write diagram code in a fenced code block with the mermaid language tag.

Basic Usage

```mermaid
graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Do this]
  B -->|No| D[Do that]
```

Flowcharts

Use graph or flowchart for process flows and decision trees.

```mermaid
flowchart LR
  User -->|HTTP POST /auth| API
  API -->|Validate| DB[(Database)]
  DB -->|token| API
  API -->|JWT| User
```

Sequence Diagrams

Great for documenting API interactions and system flows.

```mermaid
sequenceDiagram
  participant C as Client
  participant S as Server
  participant D as Database

  C->>S: POST /login {email, password}
  S->>D: SELECT user WHERE email=?
  D-->>S: user record
  S-->>C: 200 OK {access_token, refresh_token}
```

Entity-Relationship Diagrams

Document database schemas directly in your specs.

```mermaid
erDiagram
  PROJECT ||--o{ DOCUMENT : contains
  DOCUMENT ||--o{ DOCUMENT_VERSION : has
  PROJECT ||--o{ PROJECT_MEMBER : includes
  PROJECT_MEMBER }o--|| USER : is

  PROJECT {
    uuid id PK
    string name
    string slug
  }
  DOCUMENT {
    uuid id PK
    uuid project_id FK
    string title
    text content
  }
```

Class Diagrams

```mermaid
classDiagram
  class User {
    +String email
    +String id
    +login()
  }
  class Project {
    +String name
    +String slug
    +addMember()
  }
  User "1" --> "many" Project : owns
```

Gantt Charts

Useful for project timelines in product specs.

```mermaid
gantt
  title Feature Roadmap
  dateFormat  YYYY-MM-DD
  section Q1
    Git sync :done, 2025-01-01, 2025-02-01
    MCP Server :done, 2025-01-15, 2025-02-15
  section Q2
    CLI Tool :active, 2025-04-01, 2025-05-01
    Mobile App : 2025-05-01, 2025-07-01
```

Pie Charts

```mermaid
pie title Bug Distribution
  "Frontend" : 35
  "Backend" : 40
  "Infrastructure" : 15
  "Documentation" : 10
```

All Supported Diagram Types

• Flowcharts (graph / flowchart)
• Sequence diagrams (sequenceDiagram)
• Entity-Relationship (erDiagram)
• Class diagrams (classDiagram)
• State diagrams (stateDiagram-v2)
• Gantt charts (gantt)
• Pie charts (pie)
• User journey (journey)
• Git graph (gitGraph)
• Quadrant chart (quadrantChart)