使用 Mermaid 在 Markdown 中绘制图表

使用 Mermaid 在 Markdown 中绘制图表

Mermaid 是一种基于文本的图表绘制工具，可以在 Markdown 中直接创建各种图表。以下是主要图表类型的语法和示例：

一、基本语法

在 Markdown 中使用 Mermaid 需要代码块标注语言为 mermaid：

```mermaid
图表类型
图表内容

```

二、流程图 (Flowchart)

基本语法

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

代码示例

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

效果

三、序列图 (Sequence Diagram)

基本语法

sequenceDiagram
    participant 用户
    participant 系统
    用户->>系统: 登录请求
    系统-->>用户: 验证请求
    用户->>系统: 提交数据
    系统-->>用户: 返回结果

代码示例

```mermaid
sequenceDiagram
participant 用户
participant 系统
用户->>系统: 登录请求
系统–>>用户: 验证请求
用户->>系统: 提交数据
系统–>>用户: 返回结果
```

效果

四、类图 (Class Diagram)

基本语法

classDiagram
    class 用户 {
        +用户名: string
        +密码: string
        +登录()
        +注销()
    }
    
    class 订单 {
        +订单号: int
        +创建日期: date
        +计算总价()
    }
    
    用户 "1" --> "n" 订单

代码示例

```mermaid
classDiagram
class 用户 {
+用户名: string
+密码: string
+登录()
+注销()
}
class 订单 {
+订单号: int
+创建日期: date
+计算总价()
}
用户 “1” --> “n” 订单
```

效果

五、状态图 (State Diagram)

基本语法

stateDiagram-v2
    [*] --> 待机
    待机 --> 运行: 启动命令
    运行 --> 暂停: 暂停命令
    暂停 --> 运行: 继续命令
    运行 --> 待机: 停止命令
    暂停 --> 待机: 停止命令

代码示例

```mermaid
stateDiagram-v2
[*] --> 待机
待机 --> 运行: 启动命令
运行 --> 暂停: 暂停命令
暂停 --> 运行: 继续命令
运行 --> 待机: 停止命令
暂停 --> 待机: 停止命令
```

效果

六、甘特图 (Gantt Chart)

基本语法

gantt
    title 项目计划
    dateFormat  YYYY-MM-DD
    section 阶段1
    需求分析       :a1, 2023-10-01, 7d
    设计           :after a1, 5d
    section 阶段2
    开发           :2023-10-15, 10d
    测试           :2023-10-25, 5d

代码示例

```mermaid
gantt
title 项目计划
dateFormat YYYY-MM-DD
section 阶段1
需求分析 :a1, 2023-10-01, 7d
设计 :after a1, 5d
section 阶段2
开发 :2023-10-15, 10d
测试 :2023-10-25, 5d
```

效果

七、饼图 (Pie Chart)

基本语法

pie
    title 浏览器市场份额
    "Chrome" : 65.0
    "Safari" : 15.0
    "Firefox" : 10.0
    "其他" : 10.0

代码示例

```mermaid
pie
title 浏览器市场份额
“Chrome” : 65.0
“Safari” : 15.0
“Firefox” : 10.0
“其他” : 10.0
```

效果

八、实体关系图 (ER Diagram)

基本语法

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

代码示例

```mermaid
erDiagram
CUSTOMER ||–o{ ORDER : places
ORDER ||–|{ LINE-ITEM : contains
CUSTOMER }|…|{ DELIVERY-ADDRESS : uses
```

效果

九、使用技巧

主题设置‌：

%%{init: {'theme': 'dark'}}%%
graph TD
    A[开始] --> B[结束]

自定义样式‌：

graph TD
    A[开始] --> B[结束]
    style A fill:#f9f,stroke:#333
    style B fill:#bbf,stroke:#f66

交互功能‌（部分渲染器支持）：

graph TD
    A[点击我] --> B[显示效果]
    click A "https://mermaid.js.org" "这是提示文本"

十、兼容性说明

1. 需要支持 Mermaid 的 Markdown 渲染器：

• VS Code（需安装 Mermaid 插件或使用支持的功能）
• GitHub（部分支持）
• GitLab（完全支持）
• 许多静态网站生成器（如 Docsify、Docusaurus）

2. 对于不支持的环境，可以考虑：

• 使用 Mermaid 在线编辑器生成图片
• 配置构建流程自动将 Mermaid 代码转换为图片