写在前面

你是不是也遇到过这些痛点？

• 画个流程图要打开 Visio / Draw.io，调来调去还崩了

• 文档里的图和代码版本不一致，改了代码忘了改图

• 产品经理说“再改一下箭头方向”，你差点把键盘砸了

今天给你一把屠龙刀 —— Mermaid

Mermaid = Markdown + Diagram
写代码就能画图，5 分钟上手，10 分钟出图！

---

一、Mermaid 是什么？为什么火？

特点	说明
纯文本	写在 Markdown、README、Wiki 里
实时渲染	支持 GitHub（部分）、GitLab、Typora、Obsidian、VS Code
零依赖	一行 <script> 引入 mermaid.js 即可
支持 10+ 图表	流程图、时序图、甘特图、类图、饼图…
开源免费	GitHub 星标 70k+，社区活跃

一句话总结：“代码即图表，文档即可视化”

---

二、5 分钟上手：3 大核心图表实战

1. 流程图（Flowchart）—— 业务逻辑一目了然

flowchart TD
    A[用户打开APP] --> B{是否已登录？}
    B -->|是| C[加载首页]
    B -->|否| D[跳转登录页]
    D --> E[输入账号密码]
    E -->|成功| C
    E -->|失败| F[提示密码错误]
    click A "https://mermaid.live" "去 mermaid.live 试试"

效果预览如下图

支持平台：

• Typora（实时预览）

• VS Code + Mermaid Preview 插件

• GitLab（完整渲染）

• Notion（需第三方插件）

小技巧：

• TD = 从上到下，LR = 从左到右

• click 节点 href "链接" 可加超链接

---

2. 时序图（Sequence Diagram）—— API 交互清晰可见

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

    U->>F: 点击“提交订单”
    F->>B: POST /order
    B->>DB: 插入订单记录
    DB-->>B: 返回 order_id
    alt 库存充足
        B-->>F: 200 OK
        F-->>U: 支付成功
    else 库存不足
        B-->>F: 400 Stock Error
        F-->>U: 商品已售罄
    end

效果预览如下图

适用场景：

• 微服务调用链

• 前后端联调文档

• 异常分支说明

---

3. 甘特图（Gantt）—— 项目进度一图掌控

gantt
    title 移动应用开发项目
    dateFormat YYYY-MM-DD
    %% 自定义任务样式
    section iOS开发
    界面设计 :ios1, 2024-06-01, 10d
    功能开发 :crit, ios2, after ios1, 21d
    测试调试 :ios3, after ios2, 7d
    App Store提交 :milestone, ios_submit, after ios3, 2d

    section Android开发
    界面设计 :android1, 2024-06-01, 10d
    功能开发 :crit, android2, after android1, 18d
    测试调试 :android3, after android2, 7d
    Google Play提交 :milestone, android_submit, after android3, 2d

    section 后端服务
    API设计 :api1, 2024-05-25, 5d
    服务端开发 :crit, api2, after api1, 25d
    压力测试 :api3, after api2, 5d
    部署上线 :api4, after api3, 3d

效果预览如下图

状态说明：

• done 已完成

• active 进行中

• crit 关键路径（红色高亮）

• milestone 里程碑（菱形）

---

三、进阶玩法：让图表更专业

1. 自定义样式

flowchart LR
    A[开始] --> B[处理]
    B --> C[结束]
    classDef red fill:#ff6b6b,stroke:#333,color:#fff
    classDef green fill:#51cf66,stroke:#333,color:#fff
    class A green
    class C red

效果预览如下图

2. 子图分组

flowchart TD
    subgraph 模块A
        A1 --> A2
    end
    subgraph 模块B
        B1 --> B2
    end
    A2 --> B1

效果预览如下图

---

四、哪里可以用 Mermaid？

平台	支持情况	推荐方式
GitHub	部分支持（流程图、时序图）	直接写在 README.md
GitLab	完整支持	所有图表都行
Typora	实时预览	首选写作工具
Obsidian	需开启	知识管理神器
VS Code	插件支持	安装 Mermaid Preview
微信公众号	不支持	导出 PNG 插入

导出 PNG 技巧：打开 mermaid.live → 粘贴代码 → 点击 Download → PNG/SVG

---

五、学习资源 & 快速上手清单

资源	链接
官方实时编辑器	mermaid.live
官方文档	mermaid.js.org
VS Code 插件	搜索 “Mermaid Preview”
中文社区	搜索 “Mermaid 中文”

5 分钟上手清单：

1. 打开 mermaid.live

2. 复制上面任意一段代码

3. 改几个词，点 Download 导出

4. 插入文档/公众号/钉钉群

5. 收获同事惊叹：“你这图咋画的？！”

---

六、写在最后

Mermaid 不是画图工具，它是“思考可视化”工具。

• 产品经理用它画用户旅程

• 架构师用它画微服务关系

• 项目经理用它管进度

• 开发者用它写接口文档

从今天起，告别鼠标拖拽，拥抱代码画图！