使用 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 代码转换为图片