Markdown绘图全攻略：6大工具让技术文档生动起来

（一）Mermaid - 最受欢迎的通用图表工具

核心优势：

• 语法简洁：类似伪代码的文本定义，例如 graph TD; A-->B 即可生成流程图。

• 多场景支持：覆盖流程图、时序图、甘特图、类图、饼图等 10+ 图表类型。

• 动态渲染：浏览器或编辑器实时渲染为 SVG 矢量图，支持导出多种格式。

适用场景：

• 技术文档、项目规划、会议记录等需要快速可视化流程的场景。

优缺点总结： ✅ 语法简单易学 | ✅ 平台支持广泛 | ✅ 图表类型丰富 ❌ 专业UML支持有限 | ❌ 复杂布局控制较弱

Mermaid 流程图 (Flowchart)

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

渲染效果如下：

Mermaid 序列图 (Sequence Diagram)

```mermaid sequenceDiagram participant A as 用户 participant B as 系统 participant C as 数据库 A->>B: 登录请求 B->>C: 验证用户信息 C-->>B: 返回验证结果 B-->>A: 登录成功/失败 ```

渲染效果如下：

Mermaid 类图 (Class Diagram)

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

渲染效果如下：

Mermaid 状态图 (State Diagram)

状态图用于描述对象在其生命周期中的各种状态以及状态之间的转换关系，非常适合展示系统或组件的状态变化。

```mermaid stateDiagram-v2 [*] --> 待机状态 待机状态 --> 运行状态: 启动 运行状态 --> 暂停状态: 暂停 暂停状态 --> 运行状态: 继续 运行状态 --> 停止状态: 停止 暂停状态 --> 停止状态: 停止 停止状态 --> [*] state 运行状态 { [*] --> 初始化 初始化 --> 处理中 处理中 --> 完成 完成 --> [*] } ```

渲染效果如下：

Mermaid 甘特图 (Gantt Chart)

```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 ```

渲染效果如下：

Mermaid 饼图 (Pie Chart)

```mermaid pie title 浏览器市场份额 "Chrome" : 65 "Safari" : 15 "Firefox" : 10 "其他" : 10 ```

渲染效果如下：

（二）PlantUML（专业的UML)

核心优势：

• UML 全支持：支持类图、时序图、用例图等 UML 标准图表，语法严谨且功能强大。

• 集成性强：通过插件可在 GitLab、VS Code 中直接渲染，支持与 Jira、Confluence 等工具协作。

• 扩展性高：支持自定义样式和模板，适合企业级建模需求。

适用场景：软件开发设计、系统架构文档、学术论文等需要专业 UML 图的场景。

支持的图表类型：

• 时序图（Sequence）

• 用例图（Use Case）

• 类图（Class）

• 活动图（Activity）

• 组件图（Component）

• 状态图（State）

• 对象图（Object）

• 部署图（Deployment）

PlantUML 时序图 (Sequence Diagram)

时序图用于描述对象之间交互的时间顺序，非常适合展示系统组件间的调用关系。

```plantuml @startuml actor 用户 participant "前端" as UI participant "后端" as API database 数据库 用户 -> UI: 输入用户名密码 UI -> API: 发送登录请求 API -> 数据库: 查询用户信息 数据库 --> API: 返回用户数据 API -> API: 验证密码 API --> UI: 返回登录结果 UI --> 用户: 显示登录结果 @enduml ```

渲染效果如下：

PlantUML 类图 (Class Diagram)

类图用于展示系统中类的结构和关系，是面向对象设计的重要工具。

```plantuml @startuml class 用户 { -username: String -password: String +login(): Boolean +logout(): void } class 订单 { -orderId: Long -amount: Double -createTime: Date +calculateTotal(): Double } class 商品 { -productId: Long -name: String -price: Double } 用户 "1" -- "n" 订单 订单 "1" -- "n" 商品 @enduml ```

渲染效果如下：

PlantUML 用例图 (Use Case Diagram)

用例图用于描述系统功能和用户角色之间的关系，常用于需求分析阶段。

```plantuml @startuml left to right direction actor 访客 as guest actor 注册用户 as user actor 管理员 as admin rectangle 系统 { guest --> (浏览商品) user --> (浏览商品) user --> (下单购买) user --> (查看订单) admin --> (管理商品) admin --> (管理订单) admin --> (管理用户) (下单购买) .> (浏览商品) : includes (查看订单) .> (下单购买) : extends } @enduml ```

渲染效果如下：

PlantUML 活动图 (Activity Diagram)

活动图用于描述业务流程或工作流，展示活动之间的控制流。

```plantuml @startuml start :用户访问登录页面; :输入用户名和密码; if (验证用户信息?) then (成功) :跳转到主页; :显示欢迎信息; else (失败) :显示错误信息; :返回登录页面; endif stop @enduml ```

渲染效果如下：

（三） Graphviz（复杂图形专家）

核心优势：

• 强大布局算法：使用 DOT 语言定义图形结构，自动生成层次图、树状图等复杂布局。

• 高定制性：支持调整节点形状、颜色、边样式等细节，适合数据可视化和网络拓扑图。

• 跨平台支持：通过插件（如 Viz.js）可在 Markdown 中使用，输出 SVG 或 PNG 格式。

适用场景：算法流程图、数据结构示意图、网络架构图等需要精细控制的场景。

（四）Excalidraw（手绘风格白板）

核心优势：

• 手绘质感：生成具有草图风格的图表，适合快速原型设计和头脑风暴。

• Markdown 集成：在 Obsidian、Notion 等工具中可直接嵌入，支持反向链接和版本管理。

• 实时协作：允许多人同时编辑，适合团队讨论和需求分析。

适用场景：产品原型设计、用户体验流程图、非正式文档配图等。

（五）D2（新兴轻量工具）

核心优势：

• 极简语法：类似 Markdown 的文本定义，学习成本极低，例如 graph A->B 即可生成流程图。

• 版本友好：图表代码可直接纳入 Git 仓库，支持与代码同步管理。

• 美观输出：自动优化布局，渲染效果现代简洁，适合追求视觉一致性的文档。

适用场景：个人笔记、轻量级技术文档、需要快速迭代的图表设计。

（六）Eraser (DiagramGPT)（AI 驱动工具）

核心优势：

• 自然语言生成：输入文字描述（如 “创建用户登录状态图”）即可自动生成图表代码。

• AI 辅助编辑：支持从代码片段或现有图表智能优化布局，减少手动调整成本。

• 团队协作：集成 GitHub、Confluence 等平台，支持多人实时编辑和评论。

适用场景：快速验证设计思路、团队协作建模、非技术人员参与的图表生成。

（七）其他工具

1. 字符画工具

2. Draw.io：拖拽式在线工具，支持导出 XML 格式嵌入 Markdown，适合混合文本与图形的场景。

3. Ditaa：轻量级文本转图片工具，语法简单但功能有限，适合基础流程图。

4. Vega & Vega-Lite：专注于数据可视化，支持交互式图表，适合学术论文和数据分析报告。

1. 选择建议

• 快速上手：优先选择 Mermaid 或 Excalidraw ，语法简单且集成广泛。

• 专业 UML： PlantUML 是首选，适合严格遵循标准的开发场景。

• 复杂图形： Graphviz 提供最高级别的控制，适合算法和数据可视化。

• AI 辅助： Eraser 大幅提升效率，尤其适合团队协作和快速原型。

• 手绘风格： Excalidraw 的草图质感能增强文档亲和力，适合创意类内容。

通过合理选择工具，可在 Markdown 中实现从简单流程到复杂架构的全场景可视化，同时保持文本的可维护性和版本控制优势。

2. 版本控制最佳实践

• 将图表源码与项目代码一同管理

• 使用有意义的提交信息描述图表变更

• 建立团队统一的图表规范

3. 性能优化建议

• 大型图表考虑拆分为多个小图表

• 定期清理不再使用的图表代码

• 为复杂图表添加注释说明