Mermaid.js：用代码画流程图，写文档、做架构图的效率神器

写技术文档、写 PR 说明、做系统架构图……你还在用拖拽式工具画图吗？每次改都得好几分钟，而且换个工具格式就全乱了。

Mermaid.js 的思路完全不一样：你用文本语法描述图表，它实时渲染成 SVG。改图？改代码就行。版本管理？直接进 Git。

什么是 Mermaid？

Mermaid 是一个开源的图表渲染工具，通过类 Markdown 的文本语法来描述图表，然后渲染成 SVG 或 PNG。它可以嵌入在 Markdown 文档里，也可以独立使用。

官网：mermaid.js.org

VS Code、GitHub、GitLab、Notion、Figma……主流工具基本都支持了。

快速上手

最简单的方式，用官方提供的在线编辑器：mermaid.live

左边写代码，右边实时预览，写完直接导出图片或嵌入代码。

流程图（Flowchart）

最常用的场景，画流程图：

mermaid
flowchart TD
    A[开始] --> B{{"有账号？"}}
    B -->|是| C[登录]
    B -->|否| D[注册]
    C --> E[进入主页]
    D --> E
    E --> F[选择功能]
    F --> G[完成操作]
    G --> H[结束]

解释一下语法：

• flowchart TD：从上到下的流程图（LR = 从左到右，RL = 从右到左）
• A[文字]：方形节点
• A(文字)：圆角矩形
• A{{"文字"}}：菱形判断节点
• A ---> B：箭头连接线
• |说明|：线上标注文字

序列图（Sequence Diagram）

描述系统组件之间的交互时序：

mermaid
sequenceDiagram
    participant U as 用户
    participant F as 前端
    participant B as 后端
    participant D as 数据库

    U->>F: 打开页面
    F->>B: 请求数据
    B->>D: 查询
    D-->>B: 返回结果
    B-->>F: JSON响应
    F-->>U: 渲染页面

ER 图（Entity Relationship）

数据库设计时特别有用：

mermaid
erDiagram
    USER {{
        int id PK
        string name
        string email
    }}
    POST {{
        int id PK
        string title
        int user_id FK
    }}
    USER ||--o{{ POST : writes

甘特图（Gantt）

mermaid
gantt
    title 项目排期
    dateFormat YYYY-MM-DD
    section 前端
    UI设计       :a1, 2026-05-01, 7d
    页面开发     :a2, after a1, 10d
    section 后端
    接口开发     :b1, after a2, 12d

在 GitHub README 里使用

GitHub 原生支持 Mermaid，只需要在 Markdown 里写：

```mermaid
flowchart LR
    A[输入] --> B[处理]
    B --> C[输出]
```

GitHub 会自动渲染，非常适合用在项目文档里。

VS Code 插件

推荐插件：Mermaid Markdown Syntax Highlighting 或 Mermaid Editor，可以在 VS Code 里实时预览。

适用场景

• ✅ 技术文档（API 文档、架构说明）
• ✅ GitHub/GitLab 项目 README
• ✅ 设计方案的讨论和存档
• ✅ 数据库 ER 图
• ✅ 项目排期甘特图
• ❌ 高度定制化设计图（还是得用 Figma/Sketch）

一句话总结：写代码的人画图，就该用代码。Mermaid 把图表变成代码，Git 可以版本控制，改图只需要改几行文本，比拖拽工具高效 10 倍不止。