Markdown-12-图表
图表在技术文档中非常重要，它可以：
- 可视化复杂的数据关系
- 展示系统架构和工作流程
- 更清晰地表达思想和概念
Mermaid 是最流行的 Markdown 图表工具之一，它可以使用简单的文本语法生成各种图表。
支持图表类型：
- 流程图 (Flowchart)
- 序列图 (Sequence Diagram)
- 类图 (Class Diagram)
- 状态图 (State Diagram)
- 甘特图 (Gantt Chart)
- 饼图 (Pie Chart)
流程图
```mermaid
graph TD
A((开始)) ==> B{条件判断}
B -.-> | 是 | C(执行操作A)
B -.-> | 否 | D>执行操作B]
C --> E[结束]
D --> E
```
效果：
流程图方向：
TD或TB：从上到下BT：从下到上RL：从右到左LR：从左到右
节点形状：
[方形]：矩形(圆角矩形)：圆角矩形{菱形}：菱形（决策）((圆形))：圆形>旗帜形]：旗帜形
连接线类型：
-->实线箭头-.->虚线箭头==>粗实线箭头--实线-.虚线
时序图
```mermaid
sequenceDiagram
actor A as 用户
box rgb(230,240,255) 后端
participant B as 系统
participant C as 数据库
end
note right of C: MySQL
Redis
A ->> B: 登录请求
loop 数据交互
C->B: 数据的变动和查询
end
B ->> C: 验证用户信息
C -->> B: 返回验证结果
B -->> A: 登录成功/失败
```
效果：
时序图语法要点：
participant：普通参与者actor：带小人图标的参与者as：起别名box：分组note：添加注释->：实线，无箭头-->：虚线，无箭头->>：实线，实心箭头-->>：虚线，实心箭头-x：实线，末端叉号--x：虚线，末端叉号-)：实线，开放箭头，常用于异步消息--)：虚线，开放箭头，常用于异步消息<<->>：实线双向箭头，较新版本支持<<-->>：虚线双向箭头，较新版本支持
甘特图
mermaid gantt title 项目开发计划 dateFormat YYYY-MM-DD section 设计阶段 需求分析 :done, des1, 2024-01-01,2024-01-15 UI设计 :active, des2, 2024-01-10, 30d section 开发阶段 前端开发 : dev1, after des2, 45d 后端开发 : dev2, 2024-02-01, 60d section 测试阶段 单元测试 : test1, after dev1, 15d 集成测试 : test2, after dev2, 10d
效果：
甘特图语法要点：
title：设置标题dateFormat：定义日期格式section：定义阶段- 任务状态：
done：已完成active：进行中crit：关键
饼图
mermaid pie title 浏览器市场份额 "Chrome" : 65 "Safari" : 15 "Firefox" : 10 "其他" : 10
效果：
类图
类图用于面向对象设计，展示类及其关系。
```mermaid
classDiagram
class 用户 {
+用户名: string
+密码: string
+登录()
}
class 订单 {
+订单号: int
+创建日期: date
+计算总价()
}
用户 "1" --> "n" 订单
```
效果：
高级技巧
主题定制
Mermaid 允许自定义图表样式：
mermaid %%{init: {'theme': 'forest'}}%% pie title 自定义主题 "项目A" : 30 "项目B" : 50 "项目C" : 20
效果：
交互式图表
一些工具支持添加交互功能：
mermaid graph TD A[点击我] --> B[显示详细信息] click A "https://www.runoob.com" "这是提示文本"
效果：
导出图表
大多数工具支持将图表导出为：
- PNG：图片
- SVG：矢量图
- PDF：文档
工具支持情况
| 工具/平台 | Mermaid | PlantUML | Graphviz |
|---|---|---|---|
| GitHub | ✔ | ✖ | ✖ |
| GitLab | ✔ | ✔ | ✔ |
| VS Code | 插件 | 插件 | 插件 |
| Typora | ✔ | ✖ | ✖ |
| Obsidian | 插件 | 插件 | 插件 |
最佳实践
- 保持简洁：图表应该简单明了，避免过多细节
- 统一风格：同一文档中的图表应保持一致的风格
- 添加说明：为复杂图表添加文字说明
- 版本控制：文本格式的图表可以很好地与 Git 配合使用
- 测试渲染：在不同平台上测试图表显示效果
官方文档
可视化编辑器
- Mermaid Live Editor: https://mermaid.live
- PlantUML Server: http://www.plantuml.com/plantuml
浙公网安备 33010602011771号