程序员为什么要“用代码画图”？

作为开发者或技术写作者，画图是我们绕不开的坎。无论是流程图、时序图还是类图，传统的 Visio 等工具虽然强大，但往往存在以下痛点：

1. 版本管理难：二进制文件或在线链接，无法像代码一样通过 Git 进行差异对比（Diff）。
2. 切换繁琐：写文档时，要在 Markdown 编辑器和画图软件之间来回切换，思路容易打断。
3. 排版强迫症：为了对齐一个框、调整一根线，往往要花去大半个小时，效率极低。

Mermaid 的出现，就是为了解决这些问题。它倡导 “Diagrams as Code”（像写代码一样画图），只需要简单的文本描述，就能自动渲染出漂亮的图表。

今天这篇通过，带你从零开始掌握 Mermaid，并分享一些高效的工具技巧。

---

一、Mermaid 是什么？

Mermaid 是一个基于 JavaScript 的图表绘制工具。它深受 Markdown 语法的启发，允许你通过文本来创建图表。目前，GitHub、GitLab、Notion、Obsidian 以及大多数主流 IDE（如 VS Code、IntelliJ IDEA）都已经原生支持或通过插件支持 Mermaid。

核心优势：

• 文本即图表：轻量级，易于修改。
• 自动布局：你只管逻辑，布局交给引擎。
• 易于集成：完美融入 Markdown 文档。

---

二、Mermaid 核心语法实战

1. 流程图 (Flowchart)

这是最常用的图表类型。

代码示例：

graph TD
    A[开始] --> B{是否已登录?}
    B -- 是 --> C[进入首页]
    B -- 否 --> D[跳转登录页]
    D --> B
    C --> E[结束]

渲染结果：

语法解析：

• graph TD：表示从上到下（Top-Down）的图。也可以是 LR（从左到右）。
• [ ]：表示矩形节点；( ) 表示圆角节点；{ } 表示菱形判定框。
• -->：表示箭头连接。

2. 时序图 (Sequence Diagram)

用于展示对象之间的交互顺序，非常适合画 API 调用流程。

代码示例：

sequenceDiagram
    participant U as 用户
    participant S as 服务器
    participant D as 数据库

    U->>S: 发起请求
    S->>D: 查询数据
    D-->>S: 返回结果
    S-->>U: 响应页面

渲染结果：

语法解析：

• participant：定义参与者。
• ->>：实线箭头（请求）。
• -->>：虚线箭头（响应）。

3. 甘特图 (Gantt)

项目经理和排期管理的神器。

代码示例：

gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 后端开发
    数据库设计       :a1, 2023-10-01, 3d
    API接口开发      :after a1, 5d
    section 前端开发
    页面切图         :2023-10-03, 4d
    接口联调         : 3d

渲染结果：

4. 类图 (Class Diagram)

面向对象设计必备。

代码示例：

classDiagram
    class Animal {
        +String name
        +eat()
        +sleep()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog

渲染结果：

---

三、工欲善其事：如何高效编写 Mermaid？

虽然 Mermaid 语法不难，但对于初学者或者在没有安装插件的电脑上工作时，实时预览和语法调试是一个刚需。

很多时候我们在写复杂的时序图时，写错一个标点整个图就挂了，在 IDE 里排查半天很累。

这里推荐一个我平时常用的在线工具，非常适合用来快速测试代码或者生成图片分享：

👉 Mermaid 在线编辑器

推荐理由：

1. 实时渲染：左边写代码，右边秒出图，所见即所得，非常适合调试语法。
2. 界面纯净：没有乱七八糟的广告干扰，打开就能用，加载速度很快。
3. 多格式导出：支持直接将渲染好的图导出为 SVG 或 PNG，方便直接插入到 Word 或 PPT 报告中（这一点在写汇报文档时特别有用）。
4. 示例丰富：里面内置了一些模板，忘记语法的时候点一下示例，改改就能用。

平时如果不想打开沉重的 IDE，或者需要快速画个图发给同事，用这个在线编辑器是最快捷的方案。

---

四、进阶技巧：Mermaid 与文档的深度集成

掌握了工具后，我们可以将 Mermaid 应用到更广泛的场景中：

1. GitHub / GitLab Readme：
   直接在项目的 README.md 中使用 ```mermaid 代码块，代码仓库里的架构图永远保持最新，再也不用担心“文档和代码不一致”的问题。

2. Obsidian / Notion 笔记：
   构建个人知识库时，用 Mermaid 画思维导图或逻辑图，不仅美观，而且不仅占用图片存储空间，检索起来也方便。

3. Hugo / Hexo 博客：
   如果你也是写博客的，通过简单的插件配置，就可以让你的静态博客原生支持 Mermaid 渲染。

结语

“文档即代码”（Docs as Code）是现代软件工程的重要理念。Mermaid 让画图变成了编码的一部分，极大地降低了维护成本。

如果你还在忍受 Visio 的对齐线折磨，不妨试试 Mermaid。配合上文提到的在线编辑器进行快速练习，相信你很快就能体会到“键盘敲出流程图”的快感！