图表即代码：Mermaid 与它的朋友们

2014 年，瑞典开发者 Knut Sveidqvist 遇到了一个糟糕的问题：他精心制作的一张 Visio 流程图文件损坏了，无法打开。在绝望中，他看着女儿正在看迪士尼的《小美人鱼》，突然想到：如果图表也能用文本来描述，像代码一样管理，那该多好。

这个偶然的想法，催生了 Mermaid——一个用文本描述图表、自动生成 SVG 的工具。今天它拥有 8.5 万 GitHub star，成为 GitHub 原生支持的图表工具，获得了 750 万美元的种子轮融资。

图表即代码的范式

“图表即代码”（Diagram-as-Code）的核心思想很简单：用声明式文本描述图表结构，由布局引擎自动计算位置，输出矢量图形。

这种范式带来了三个革命性优势：

1. 可版本管理：图表作为文本存储，可以像代码一样提交到 Git，完整追踪每一次变更历史
2. 可 diff：文本可以精确对比两个版本的区别，不像图形文件只能靠肉眼判断
3. 可 AI 生成：大语言模型理解文本比理解像素容易得多，可以直接生成图表代码

flowchart TD
  A[文本描述] --> B[布局引擎]
  B --> C[SVG 输出]
  A --> D[版本管理]
  A --> E[AI 生成]
  C --> F[嵌入文档]
  D --> F
  E --> A

三十年的进化史

图表即代码的思想，其实可以追溯到 1991 年的 AT&T 贝尔实验室。

Graphviz：鼻祖

AT&T 贝尔实验室在 1991 年开发了 Graphviz，它定义了 DOT 语言，提供了六种布局引擎：

• dot：有向图的层次布局
• neato：基于弹簧模型的布局
• fdp：力导向布局
• sfdp：大规模图布局优化
• circo：环形布局
• twopi：径向布局

Graphviz 至今仍是学术界研究复杂网络可视化的首选工具，堪称图表即代码领域的"祖父级"项目。

PlantUML：UML 专家

2009 年推出的 PlantUML 专注于 UML 图表，它用 Java 实现，底层仍然使用 Graphviz 的布局引擎。PlantUML 的强大之处在于对 UML 标准的完整支持，从类图到时序图、用例图，无所不包。

Mermaid：年轻人的颠覆

Mermaid 的不同在于，它不依赖任何外部布局引擎，而是基于 dagre 库实现了自己的轻量级布局算法。这让 Mermaid 可以直接在浏览器中运行，无需 Java 环境，也无需后端渲染服务。

更重要的是，Mermaid 支持 15+ 种图表类型，从流程图、时序图、类图，到甘特图、ER 图、思维导图，几乎覆盖了技术文档的所有需求。

2022 年，GitHub 宣布原生支持 Mermaid 语法，这是图表即代码的分水岭时刻——开发者无需额外配置，就可以在 README、Issue、Wiki 中直接渲染图表。

D2：现代化的 DSL

D2 是后起之秀，它用 TALA 布局引擎替代了 dagre，在架构图场景下表现更优秀。D2 的特色是对 C4 架构模型的一等支持，让系统架构图的绘制变得异常简单。

生态对比

不同工具各有侧重，选择时需要考虑具体场景：

除了这些"纯文本"工具，还有一些图形化工具值得一提：

• Excalidraw：手绘风格的白板工具，支持协作，适合头脑风暴
• Draw.io（diagrams.net）：专业的图表工具，支持精确控制，适合正式文档

这些图形化工具在输出时，也可以导出为 Mermaid 或 Graphviz 格式，实现与图表即代码生态的桥接。

未来已来

从丢失 Visio 文件的绝望，到 GitHub 上的 8.5 万星，Mermaid 的十年历程印证了一个道理：好的技术范式，往往源于解决一个真实、具体的问题。

图表即代码让"用文字画画"不再是幻想。当 AI 能够理解文本并生成代码时，图表即代码就成了 AI 生成可视化内容的最佳桥梁——模型不需要学习复杂的图形 API，只需要用自然语言描述图表结构，布局引擎会自动完成剩下的工作。

下一个十年，也许我们不再需要手动绘制图表，而是用一句话：“画一个微服务的架构图，展示从用户请求到数据库的完整流程。”

图表即代码，让这句话成为现实。