写在前面
你是不是也遇到过这些痛点？
画个流程图要打开Visio / Draw.io，调来调去还崩了
文档里的图和代码版本不一致，改了代码忘了改图
产品经理说“再改一下箭头方向”，你差点把键盘砸了
今天给你一把屠龙刀 —— Mermaid
Mermaid = Markdown + Diagram
写代码就能画图，5 分钟上手，10 分钟出图！
一、Mermaid 是什么？为什么火？
特点 | 说明 |
|---|---|
| 纯文本 | 写在 Markdown、README、Wiki 里 |
| 实时渲染 | 支持 GitHub（部分）、GitLab、Typora、Obsidian、VS Code |
| 零依赖 | 一行 |
| 支持 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 分钟上手清单：
打开 mermaid.live
复制上面任意一段代码
改几个词，点Download导出
插入文档/公众号/钉钉群
收获同事惊叹：“你这图咋画的？！”
六、写在最后
Mermaid 不是画图工具，它是“思考可视化”工具。
产品经理用它画用户旅程
架构师用它画微服务关系
项目经理用它管进度
开发者用它写接口文档
从今天起，告别鼠标拖拽，拥抱代码画图！
