Mermaid 图表语言¶

code --install-extension bierner.markdown-mermaid

npm install -g @mermaid-js/mermaid-cli

# 验证
mmdc --version

npm install mermaid

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

```mermaid
flowchart TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作A]
    B -->|否| D[执行操作B]
    C --> E[结束]
    D --> E
```

```mermaid
sequenceDiagram
    participant U as 用户
    participant S as 服务器
    participant DB as 数据库

    U->>S: 发送请求
    S->>DB: 查询数据
    DB-->>S: 返回结果
    S-->>U: 响应数据
```

```mermaid
erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : "is in"

    USER {
        int id PK
        string name
        string email UK
    }
    ORDER {
        int id PK
        date created_at
        int user_id FK
    }
```

```mermaid
gantt
    title 项目开发计划
    dateFormat YYYY-MM-DD
    section 设计阶段
    需求分析     :a1, 2024-01-01, 7d
    架构设计     :a2, after a1, 5d
    section 开发阶段
    后端开发     :b1, after a2, 14d
    前端开发     :b2, after a2, 14d
    section 测试阶段
    集成测试     :c1, after b1, 7d
```

```mermaid
flowchart TB
    subgraph Frontend
        A[React App] --> B[API Client]
    end
    subgraph Backend
        C[FastAPI] --> D[Business Logic]
        D --> E[(PostgreSQL)]
    end
    B -->|HTTP| C
```

```mermaid
sequenceDiagram
    autonumber
    participant C as Client
    participant G as Gateway
    participant S as Service

    C->>G: Request
    activate G
    G->>S: Forward
    activate S

    alt 成功
        S-->>G: 200 OK
        G-->>C: Response
    else 失败
        S-->>G: 500 Error
        G-->>C: Error Response
    end

    deactivate S
    deactivate G

    note over C,S: 重试机制
    loop 最多重试3次
        C->>G: Retry Request
    end
```

```mermaid
stateDiagram-v2
    [*] --> Draft
    Draft --> Review: 提交审核
    Review --> Approved: 通过
    Review --> Draft: 驳回
    Approved --> Published: 发布
    Published --> Archived: 归档
    Archived --> [*]

    state Review {
        [*] --> PeerReview
        PeerReview --> LeaderReview
        LeaderReview --> [*]
    }
```

```mermaid
%%{init: {'theme': 'forest'}}%%
flowchart LR
    A[Step 1] --> B[Step 2]
    style A fill:#f9f,stroke:#333
    style B fill:#bbf,stroke:#333
```

# 导出为 PNG
mmdc -i diagram.mmd -o diagram.png -t dark -w 1200

# 导出为 SVG
mmdc -i diagram.mmd -o diagram.svg

# 导出为 PDF
mmdc -i diagram.mmd -o diagram.pdf

```mermaid
gitGraph
    commit
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    merge feature
    commit
```

A["中文标签"] --> B["另一个中文"]

%%{init: {'flowchart': {'nodeSpacing': 50, 'rankSpacing': 80}}}%%

A["包含 (括号) 的文本"]
B["含有 #hash 的文本"]