Markdown 图表绘制（十四）
14.图表绘制
使用文本语法生成图表，便于版本控制、动态更新。主流工具：Mermaid（最流行）、PlantUML、Graphviz。
一、Mermaid 基本介绍
- 支持图表类型：流程图、序列图、类图、状态图、甘特图、饼图等
- 渲染支持：GitHub、GitLab、Typora、Obsidian（需插件）、VS Code（插件）
- 在线编辑器：https://mermaid.live
二、流程图
2.1 方向声明
| 代码 | 方向 |
|---|---|
TD / TB |
从上到下 |
BT |
从下到上 |
LR |
从左到右 |
RL |
从右到左 |
2.2 节点形状
| 形状 | 语法 | 示例 |
|---|---|---|
| 矩形（方形） | [文字] |
A[开始] |
| 圆角矩形 | (文字) |
B(处理) |
| 菱形（决策） | {文字} |
C{条件} |
| 圆形 | ((文字)) |
D((结束)) |
| 旗帜形 | >文字] |
E>输出] |
2.3 连接线类型
| 类型 | 语法 | 说明 |
|---|---|---|
| 实线箭头 | --> |
A-->B |
| 虚线箭头 | -.-> |
A-.->B |
| 粗实线箭头 | ==> |
A==>B |
| 实线（无箭头） | --- |
AB |
| 虚线（无箭头） | -.- |
A-.-B |
2.4 完整示例
graph TD
A[开始] --> B{条件判断}
B -->|Yes| C[执行操作A]
B -->|No| D[执行操作B]
C --> E[结束]
D --> E三、时序图
3.1 基本语法
-
participant定义参与者 -
->>实线箭头（请求） -
-->>虚线箭头（响应） -
Note right of / left of添加注释 -
loop循环块
3.2 示例
sequenceDiagram
participant A as 用户
participant B as 系统
participant C as 数据库
A->>B: 登录请求
B->>C: 验证用户信息
C-->>B: 返回验证结果
B-->>A: 登录成功/失败四、甘特图
4.1 语法要点
-
title标题 -
dateFormat YYYY-MM-DD日期格式 -
section阶段名称 - 任务格式：
任务名 : 状态, 标识符, 开始时间, 持续时间/结束时间 - 状态：
done（已完成）、active（进行中）、crit（关键任务） -
after 标识符相对开始时间
4.2 示例
gantt
title 项目开发计划
dateFormat YYYY-MM-DD
section 设计阶段
需求分析 :done, des1, 2024-01-01, 15d
UI设计 :active, des2, 2024-01-10, 30d
section 开发阶段
前端开发 : dev1, after des2, 45d
后端开发 : dev2, 2024-02-01, 60d
section 测试阶段
单元测试 : test1, after dev1, 15d五、饼图
5.1 语法
-
pie声明 -
title标题 -
"标签" : 数值（数值无需百分比符号，自动计算比例）
5.2 示例
pie
title 浏览器市场份额
"Chrome" : 65
"Safari" : 15
"Firefox" : 10
"其他" : 10六、类图
6.1 基本语法
-
class 类名定义类 - 属性/方法格式：
+公有#保护-私有~包内 - 关系：
-->（关联）、--|>（继承）、..>（实现）、o--（聚合）、*--（组合）
6.2 示例
classDiagram
class 用户 {
+用户名: string
+密码: string
+登录()
}
class 订单 {
+订单号: int
+创建日期: date
+计算总价()
}
用户 "1" --> "n" 订单七、高级技巧
7.1 主题定制
在图表前添加初始化指令：
%%{init: {'theme': 'forest'}}%%
pie
title 自定义主题
"项目A" : 30
"项目B" : 50可选主题：default、forest、dark、neutral 等。
7.2 交互式图表
部分渲染器支持
graph TD
A[点击我] --> B[显示详细信息]
click A "https://www.runoob.com" "提示文本"7.3 导出格式
多数工具支持导出为 PNG、SVG、PDF。
八、工具与平台支持
| 平台/工具 | Mermaid | PlantUML | Graphviz |
|---|---|---|---|
| GitHub | ✔ | ✘ | ✘ |
| GitLab | ✔ | ✔ | ✔ |
| VS Code | 需插件 | 需插件 | 需插件 |
| Typora | ✔ | ✘ | ✘ |
| Obsidian | 需插件 | 需插件 | 需插件 |
九、最佳实践
- 保持简洁：每张图表聚焦一个核心流程或关系。
- 统一风格：同一文档中使用相同的布局方向、节点形状。
- 添加文字说明：复杂图表前后加解释段落。
- 版本控制友好：文本形式的图表便于 diff 和协作。
- 测试渲染：在不同平台（GitHub、本地编辑器）上预览，确保兼容。
十、常见问题
Q1：图表无法显示？
- 检查代码块语言是否为
mermaid - 确认渲染器支持 Mermaid（GitHub 支持，但需在 markdown 代码块中正确标识）
- 检查语法错误（缺少空格、括号不匹配等）
Q2：如何学习更多语法？
- Mermaid 官方文档
- 在线编辑器：https://mermaid.live （实时编辑、分享）
Q3：有无可视化编辑器？
- Mermaid Live Editor
- PlantUML Server：http://www.plantuml.com/plantuml
总结速查表
| 图表类型 | 代码块标识 | 常用语法 |
|---|---|---|
| 流程图 | mermaid + graph TD/LR |
A-->B、A{条件} |
| 时序图 | sequenceDiagram |
participant、->>、-->> |
| 甘特图 | gantt |
section、after、done/active |
| 饼图 | pie |
"标签" : 数值 |
| 类图 | classDiagram |
class、+属性、--> 关系 |
💡 提示：图表代码写在
```mermaid代码块中，确保编辑器/平台支持 Mermaid 渲染。