Mermaid図

SpecDownはMermaid図を ライブプレビューでネイティブにレンダリングします。mermaid言語タグ付きの フェンスコードブロックに図のコードを記述してください。

基本的な使い方

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

フローチャート

プロセスフローや意思決定ツリーにはgraphまたはflowchartを使用。

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

シーケンス図

API連携やシステムフローのドキュメントに最適。

```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}
```

ER図

仕様書内でデータベーススキーマを直接ドキュメント化。

```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
  }
```

クラス図

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

ガントチャート

製品仕様のプロジェクトタイムラインに有用。

```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
```

円グラフ

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

サポート図タイプ一覧

• フローチャート（graph / flowchart）
• シーケンス図（sequenceDiagram）
• ER図（erDiagram）
• クラス図（classDiagram）
• 状態図（stateDiagram-v2）
• ガントチャート（gantt）
• 円グラフ（pie）
• ユーザージャーニー（journey）
• Git グラフ（gitGraph）
• 象限チャート（quadrantChart）