Sơ đồ Mermaid

SpecDown render sơ đồ Mermaidtrực tiếp trong preview. Viết mã sơ đồ trong code block với thẻ ngôn ngữ mermaid.

Cách dùng cơ bản

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

Sơ đồ luồng

Dùng graph hoặc flowchart cho luồng xử lý và cây quyết định.

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

Sơ đồ tuần tự

Phù hợp để mô tả tương tác API và luồng hệ thống.

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

Sơ đồ quan hệ thực thể

Mô tả schema database trực tiếp trong đặc tả.

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

Sơ đồ lớp

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

Biểu đồ Gantt

Hữu ích cho timeline dự án trong đặc tả sản phẩm.

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

Biểu đồ tròn

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

Các loại sơ đồ hỗ trợ

• Sơ đồ luồng (graph / flowchart)
• Sơ đồ tuần tự (sequenceDiagram)
• Quan hệ thực thể (erDiagram)
• Sơ đồ lớp (classDiagram)
• Sơ đồ trạng thái (stateDiagram-v2)
• Biểu đồ Gantt (gantt)
• Biểu đồ tròn (pie)
• Hành trình người dùng (journey)
• Git graph (gitGraph)
• Biểu đồ tứ phân (quadrantChart)