Mermaid 图表：让复杂的技术文档"活"起来

你还在用 Visio 画流程图吗？或者用 PowerPoint 一点点拼凑架构图？

如果你正在维护技术文档或需求说明，Mermaid 值得了解一下：它能把“图”变成可版本管理、可审阅的文本。

什么是 Mermaid？

Mermaid 是一种基于文本描述生成图表的标记语言。通过简单的语法，你可以描述流程图、时序图、类图、甘特图等多种图表类型，Mermaid 会自动渲染成精美的图形。

简单来说：你写文字，Mermaid 生成图表。

这段文本会自动生成一个包含判断分支的流程图。

为什么技术社区都在用？

1. 版本控制友好

Mermaid 本质上是文本，所以你可以把它放在 Git 里管理。每次修改都有记录，改错了可以轻松回滚。

传统的 Visio 文件是二进制格式，Git 只能整体存储，无法对比差异。

2. 维护成本低

当业务流程变化时，你只需要修改文本描述，而不是在复杂的图形界面中拖拽调整。

对于需要频繁更新的文档来说，这能节省大量时间。

3. 响应式布局

Mermaid 会根据内容自动计算布局。你不需要手动排列元素，也不用担心新增节点导致图形乱成一团。

4. 易于分享和协作

在 GitHub、GitLab 等平台，Mermaid 图表可以直接渲染预览。评审代码时，不需要额外打开专门的工具。

主流使用场景

技术文档

架构图、模块依赖图、数据流向图... 技术文档中的图表，用 Mermaid 来做最省心。

在支持 Mermaid 渲染的平台（如部分代码托管与文档系统）中，图表可以像代码一样评审与维护。[1][2]

需求文档

业务流程图、泳道图、用户旅程图... 产品经理可以用 Mermaid 快速画出业务流程，便于评审和存档。

教学材料

技术教程、课程讲义中，用 Mermaid 展示概念和流程，学生可以更直观地理解内容。

会议纪要

讨论技术方案时，边聊边画，记录下来就是一份带图的规范文档。

AI + Mermaid = 新可能

当 AI 对话能力遇上 Mermaid，产生了奇妙的化学反应：

• 描述即图：你用自然语言描述一个流程，AI 自动生成 Mermaid 代码
• 解释即图：AI 解释技术概念时，可以同时生成对应的图表
• 代码即图：AI 阅读代码后，可以生成调用关系图、架构图

在 AI Chat 产品 中，你可以通过发送 Mermaid 语法让 AI 帮你生成和解释图表，也可以让 AI 在回答时直接输出 Mermaid 图表。

Mermaid 能做哪些图？

流程图 (Flowchart) - 最常用的分支判断、流程走向展示

时序图 (Sequence Diagram) - 展示系统组件之间的交互顺序

类图 (Class Diagram) - 展示面向对象中的类及其关系

状态图 (State Diagram) - 展示状态机转换

甘特图 (Gantt Chart) - 项目计划和时间管理

用户旅程图 (User Journey) - 展示用户在产品中的操作路径

ER 图 (Entity Relationship) - 数据库实体关系建模

学习成本

Mermaid 的语法非常简洁，入门只需记住几个基础符号：

• --> 表示箭头/流程
• {} 表示判断节点
• [] 表示矩形处理节点
• () 表示圆角矩形
• -->| 或 |--> 表示有标签的箭头

一个简单的流程图通常只需要掌握少量符号即可开始使用；更复杂的图表类型可以按需再查语法文档。[1]

结语

在信息爆炸的时代，清晰表达是一种稀缺能力。

Mermaid 让你能够用最小的成本，把复杂的思想可视化。这不仅是效率工具，更是一种思维方式：用结构化的语言描述世界，用自动化的工具呈现世界。

值得一试。

参考与延伸阅读

• Mermaid 官方文档 https://mermaid.js.org
• Mermaid Live Editor https://mermaid.live
• GitHub Docs：Mermaid diagrams https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams
• GitLab Docs：Mermaid diagrams https://docs.gitlab.com/ee/user/markdown.html#mermaid