作为一名开发者或技术写作者，你是否经历过这样的痛苦：

为了画一个简单的业务流程图，打开 Visio 或 PowerPoint，把时间都浪费在了对齐像素、调整箭头方向、统一配色上？更糟糕的是，当业务逻辑变更时，你又得重新拖拽调整半天。

“画图”本该是为了理清思路，而不是成为排版的奴隶。

今天，我们就来聊聊 Mermaid —— 一种基于 JavaScript 的图表绘制工具。它允许你通过简单的文本（Markdown 风格）来生成复杂的图表。Docs as Code（文档即代码），这才是程序员该有的画图方式。

为什么选择 Mermaid？

1. 版本控制友好：因为是纯文本，你可以把它放进 Git 里管理，清晰地看到图表的每一次变更差异。
2. 自动布局：你只需要定义节点和关系，Mermaid 引擎会自动帮你计算最优的布局，无需手动对齐。
3. 集成度高：现在主流的 Markdown 编辑器（如 Typora、Obsidian）以及 GitHub/GitLab 都原生支持 Mermaid。

Mermaid 核心语法速成

Mermaid 支持流程图、时序图、甘特图、类图、状态图等多种类型。下面我们通过几个最常用的例子带你快速上手。

1. 流程图 (Flowchart)

这是最基础也是最常用的图表。

代码示例：

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

渲染效果：

解析：

• graph TD：表示从上到下（Top-Down）的图。
• [] 表示矩形节点，{} 表示菱形判断节点，(()) 表示圆形节点。
• --> 表示带箭头的连线。

2. 时序图 (Sequence Diagram)

在描述系统交互、API 调用链时，时序图是必不可少的。

代码示例：

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

    U->>S: 发起请求 /login
    S->>D: 查询用户信息
    D-->>S: 返回用户数据
    alt 密码正确
        S-->>U: 返回 Token
    else 密码错误
        S-->>U: 返回 401 错误
    end

渲染效果：

解析：

• participant 定义参与者。
• ->> 表示实线箭头（请求），-->> 表示虚线箭头（响应）。
• alt ... else ... end 用于表达逻辑分支。

3. 甘特图 (Gantt Chart)

项目经理或 Team Leader 的最爱，用于展示项目进度。

代码示例：

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

渲染效果：

如何快速预览和调试？

虽然很多本地 IDE 插件支持 Mermaid，但在某些场景下，比如：

• 你不想安装笨重的插件；
• 你需要快速验证一段代码生成的图表效果；
• 你需要在一个干净的环境中从零编写并复制 SVG/PNG 给同事；

这时候，一个轻量级的在线编辑器就非常重要了。

推荐使用这个在线 Mermaid 图表编辑器，它界面清爽，支持实时预览，左边写代码，右边即时出图，非常适合新手练习或老手快速出图：

👉 工具直达：在线 Mermaid 图表编辑器

进阶技巧：自定义样式

Mermaid 甚至允许你通过 style 关键字来定制节点的颜色，让图表更符合你的 UI 风格。

graph LR
    A[普通节点] --> B[重要节点]
    style B fill:#f9f,stroke:#333,stroke-width:4px

渲染效果：

总结

Mermaid 的出现，极大地降低了绘制技术图表的门槛。它将我们将从繁琐的 UI 操作中解放出来，专注于逻辑本身。

如果你还没尝试过用代码画图，建议现在就复制上面的代码，去文中提到的在线 Mermaid 图表编辑器里试一试。相信我，一旦习惯了这种“所写即所得”的高效模式，你就再也回不去 Visio 了。