技术写作

写作工具【1.4】写作语言之markdown文本绘制图表

Markdown 文本绘图全攻略，让技术文档生动起来

大家好！今天我们来聊聊每个程序员和技术写作者都应该掌握的一项技能——用Markdown绘制图表。

你是否也遇到过这些困扰？

想画流程图却要打开专业软件，操作复杂
技术文档中的图表无法进行版本控制
团队协作时图表修改同步困难
图表与文档分离，维护成本高

今天就来介绍用Markdown绘制图表的三大神器，让你的技术文档既专业又高效！

第一部分：三大主流文本绘图工具全方位对比

工具	学习难度	功能强大程度	适用场景	平台支持	特色
Mermaid	⭐⭐	⭐⭐⭐⭐	通用文档	广泛	语法简洁，图表类型丰富
PlantUML	⭐⭐⭐	⭐⭐⭐⭐⭐	软件设计	中等	完整UML支持，专业性强
Graphviz	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	复杂图形	中等	布局算法强大，高度定制

第二部分：三大主流文本绘图工具语法详解

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

核心优势：

语法简洁：类似伪代码的文本定义，例如 graph TD; A–>B 即可生成流程图。
多场景支持：覆盖流程图、时序图、甘特图、类图、饼图等 10+ 图表类型。
动态渲染：浏览器或编辑器实时渲染为 SVG 矢量图，支持导出多种格式。

适用场景：

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

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

Mermaid 流程图 (Flowchart)

用于展示算法步骤、业务流程和决策逻辑，适合表达步骤间的流向关系。

语法说明：

方向：TD(上到下)、LR(左到右)
节点：A[文本] 矩形，A(文本) 圆角矩形
连接：–> 实线，-.-> 虚线，==>粗线

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

渲染效果如下：

Mermaid 序列图 (Sequence Diagram)

用于描述系统组件间的时序交互和消息传递，特别适合展示API调用链路。

语法说明：

参与者：participant 定义角色
消息：->> 同步，–>> 异步/返回

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

渲染效果如下：

Mermaid 类图 (Class Diagram)

用于展示面向对象设计中的类结构和关系，适合软件架构和系统设计说明。

语法说明：

类定义：class 类名 { 属性; 方法 }
关系：<|-- 继承，–> 关联，–* 组合

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

渲染效果如下：

Mermaid 状态图 (State Diagram)

用于描述对象或系统的状态变化过程，适合展示状态机和工作流转换。

语法说明：

初始状态：[*]
状态转换：状态A --> 状态B : 触发条件

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

渲染效果如下：

Mermaid 甘特图 (Gantt Chart)

用于项目管理和进度规划，可视化任务时间安排和依赖关系。

语法说明：

日期格式：YYYY-MM-DD
任务状态：done 完成，active 进行中

```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 图的场景。

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 格式。

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

digraph finite_state_machine {
	rankdir=LR;
	size="8,5"
	node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;
	node [shape = circle];
	LR_0 -> LR_2 [ label = "SS(B)" ];
	LR_0 -> LR_1 [ label = "SS(S)" ];
	LR_1 -> LR_3 [ label = "S($end)" ];
	LR_2 -> LR_6 [ label = "SS(b)" ];
	LR_2 -> LR_5 [ label = "SS(a)" ];
	LR_2 -> LR_4 [ label = "S(A)" ];
	LR_5 -> LR_7 [ label = "S(b)" ];
	LR_5 -> LR_5 [ label = "S(a)" ];
	LR_6 -> LR_6 [ label = "S(b)" ];
	LR_6 -> LR_5 [ label = "S(a)" ];
	LR_7 -> LR_8 [ label = "S(b)" ];
	LR_7 -> LR_5 [ label = "S(a)" ];
	LR_8 -> LR_6 [ label = "S(b)" ];
	LR_8 -> LR_5 [ label = "S(a)" ];
}

第三部分：其他实用绘图工具

（一）字符画

纯文本转字符画，支持多种字符集，如 ASCII、Unicode 等。

        ┌────────────┐
        │   用户     │
        └─────┬──────┘
              │
        ┌─────▼──────┐
        │  Web服务器 │
        └─────┬──────┘
              │
    ┌─────────┼─────────┐
    │         │         │
┌───▼──┐  ┌───▼──┐  ┌───▼──┐
│ DB1  │  │ DB2  │  │ DB3  │
└──────┘  └──────┘  └──────┘

（二）Draw.io

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

（三）Excalidraw

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

第四部分：平台支持情况对比

工具	GitHub	GitLab	VS Code	Typora	Obsidian
Mermaid	✔️	✔️	🔌	✔️	🔌
PlantUML	❌	✔️	🔌	❌	🔌
Graphviz	❌	✔️	🔌	❌	🔌

说明：✔️ 原生支持 🔌 插件支持 ❌ 不支持

第五部分：实用技巧分享

1. 选择建议

快速上手：优先选择 Mermaid ，语法简单且集成广泛。
专业 UML：PlantUML 是首选，适合严格遵循标准的开发场景。
复杂图形：Graphviz 提供最高级别的控制，适合算法和数据可视化。

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

2. 版本控制最佳实践

将图表源码与项目代码一同管理
使用有意义的提交信息描述图表变更
建立团队统一的图表规范

3. 性能优化建议

大型图表考虑拆分为多个小图表
定期清理不再使用的图表代码
为复杂图表添加注释说明

第六部分：数哥私藏资料推荐

结语

掌握这些 Markdown 图表工具，可以让你的技术文档更加生动直观。选择合适的工具不仅能提升写作效率，还能增强文档的可读性和专业性。

工具	特点	适合人群
Mermaid	语法简单，支持广泛	所有技术人
PlantUML	专业UML，功能强大	软件工程师
Graphviz	布局智能，高度定制	数据科学家

记住一句话：工具千万种，适合第一位。

建议从Mermaid开始尝试，它是上手最容易、应用最广泛的工具！

📌 本次分享就到这里，感谢你的阅读！
🔔 关注【数说编程】，第一时间获取技术写作、效率工具、编程干货！
💬 如果你觉得这篇文章对你有帮助，欢迎点赞、收藏、分享给更多朋友！

如果觉得文章对你有用，请随意赞赏

写作工具【1.4】写作语言之markdown文本绘制图表

http://111.229.143.193:8081/archives/%E5%86%99%E4%BD%9C%E5%B7%A5%E5%85%B7%E3%80%901.4%E3%80%91%E5%86%99%E4%BD%9C%E8%AF%AD%E8%A8%80%E4%B9%8Bmarkdown%E6%96%87%E6%9C%AC%E7%BB%98%E5%88%B6%E5%9B%BE%E8%A1%A8

作者

数说编码

发布于

2025-10-07

更新于

2025-10-07

许可协议

CC BY 4.0

写作工具【1.4】写作语言之markdown文本绘制图表

Markdown 文本绘图全攻略，让技术文档生动起来

第一部分：三大主流文本绘图工具全方位对比

第二部分：三大主流文本绘图工具语法详解

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

Mermaid 流程图 (Flowchart)

Mermaid 序列图 (Sequence Diagram)

Mermaid 类图 (Class Diagram)

Mermaid 状态图 (State Diagram)

Mermaid 甘特图 (Gantt Chart)

Mermaid 饼图 (Pie Chart)

（二）PlantUML（专业的UML)

PlantUML 时序图 (Sequence Diagram)

PlantUML 类图 (Class Diagram)

PlantUML 用例图 (Use Case Diagram)

PlantUML 活动图 (Activity Diagram)

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

第三部分：其他实用绘图工具

（一）字符画

（二）Draw.io

（三）Excalidraw

第四部分：平台支持情况对比

第五部分：实用技巧分享

1. 选择建议

2. 版本控制最佳实践

3. 性能优化建议

第六部分：数哥私藏资料推荐

结语

作者

发布于

更新于

许可协议

评论