前几天团队里有同事在群里吐槽“产品说这个流程要加一个分支我文档里那张流程图得重新画一遍还得截图替换烦死了。”说实话这个场景我太熟了。以前我也是 Visio / ProcessOn 的重度用户拖框、连线、对齐、调颜色一张图半小时起步。结果需求一变图就作废重画一遍还得重新截图、重新贴进文档。更难受的是——图是死的代码是活的图和代码根本没法一起进 Git评审时也看不出这张图改了什么。后来我彻底换了思路图不再画而是写。用的就是 Mermaid。为什么是 MermaidMermaid 是一门用文本描述图表的语言写几行代码就能生成流程图、时序图、类图、甘特图、饼图、状态图等等。它最大的价值不是少装一个画图软件而是这三点✅纯文本可以直接提交进 Git改动一目了然✅可 Review评审代码时顺手就评审了架构图✅随文档走Markdown、Notion、语雀、飞书文档、GitHub README 都能原生渲染举个例子一个登录流程我只要写这么几行是否是否开始是否登录?进入主页跳转登录页输入账号密码验证通过?提示错误产品说验证失败要多加一个’锁定账号’分支我只需要加两行图自动就变了。改图的成本从半小时降到 10 秒。但 Mermaid 也有让人抓狂的地方用了一段时间我发现真正的痛点不在语法而在环境痛点 1写的时候看不见图在本地 VS Code 里写不装插件就只能看到一堆--装了插件版本又经常和线上对不上本地能渲染、GitHub 上报错。痛点 2语法错误定位困难Mermaid 的报错信息非常含蓄经常就是甩一句Parse error on line 3你自己去猜是少了个引号还是箭头写反了。痛点 3想导出图片一堆破事好不容易渲染出来了要贴进 PPT 或者不支持 Mermaid 的平台就得截图——截图糊、缩放变形、背景不透明全是坑。痛点 4官方 Live Editor 有时候打不开mermaid.live 确实好用但它加载慢、偶尔抽风而且界面里塞满了分享、版本切换等一堆功能我只想要左边写代码、右边出图这么一件简单的事。所以我一直在找一个更轻的方案。我现在的做法一个纯在线的双栏编辑器后来我在一个在线工具箱里翻到一个 Mermaid 图表编辑器界面就是最朴素的两栏——左边代码右边实时预览没有登录、没有会员、没有弹窗打开就能写 https://leowh.com/tools/mermaid/index.html我日常用它的原因很简单实时渲染敲完一行右边立刻出图语法错误当场就暴露不用等到提交内置 5 个模板流程图、时序图、类图、甘特图、饼图点一下就载入示例代码忘了语法直接照着改一键导出 SVG矢量图放 PPT 里放大不糊背景干净一键复制代码粘回 Markdown 文档就完事CDN 挂掉也不白屏渲染库不可用时会自动降级成代码高亮预览至少图不会丢这里顺带说一句它内置的模板对新手其实挺友好——比如时序图直接给了一个标准的客户端 / 服务端 / 数据库三段式数据库服务端客户端数据库服务端客户端GET /api/usersSELECT * FROM users返回用户列表200 OK [JSON]甘特图模板也是可以直接抄的2024-01-012024-01-032024-01-052024-01-072024-01-092024-01-112024-01-132024-01-152024-01-172024-01-192024-01-212024-01-232024-01-25需求分析需求评审前端开发后端开发需求阶段开发阶段项目开发计划我一般的工作流是这样的否是点模板载入示例改成自己的内容右边渲染成功?看状态提示改语法复制代码进 Markdown下载 SVG 存进 PPT一句话先抄模板再改内容最后两边一起带走代码 图。它不能替代什么说句实在话这种轻量工具不是万能的我用下来的边界很清楚场景我的选择临时画一张图、写文档配图在线编辑器快长期维护的架构图在线编辑器出图 代码进 GitCI 里批量生成图片mermaid-climermaid-js/mermaid-cli复杂交互、自定义样式官方 Live Editor 或直接嵌 mermaid.js完全内网 / 涉密环境本地 VS Code 插件不要走公网⚠️ 特别提醒任何在线工具都不要粘贴涉密内容。内网项目请老老实实用本地插件。几个我踩过的坑顺便记录一下能帮你少走弯路节点文字里有括号 / 冒号 / 引号一定要加引号包起来A[用户登录(失败)]会报错写成A[用户登录(失败)]就正常了。graph和flowchart不是一回事新语法用flowchart TDgraph是老写法很多新特性比如子图方向只有flowchart支持。甘特图日期格式必须先声明dateFormat YYYY-MM-DD写在title后面不然日期怎么排都不对。导出优先选 SVG不要截图SVG 是矢量的进 PPT、进 Word 都不会糊真要 PNG就用浏览器打开 SVG 再另存。代码一定要留档只存图片 三个月后这张图再也改不动了。图和代码都要留。总结Mermaid 真正改变我的不是画图快了多少而是把图表变成了代码✅ 改图成本从半小时 → 10 秒✅ 图表可进 Git可 Review可追溯✅ 文档、PPT、README 三处共用同一份源码✅ 一个浏览器标签页就够了不用装任何软件如果你也受够了改一次需求重画一次图真的建议试试把图写出来而不是画出来。我现在最常用的组合就是在线编辑器出图 Markdown 存代码 Git 管版本。简单、够用、不折腾。 
长河君 · 2026/10/2 15:12:43 · 阅读 1.2k 画图 5 分钟，改图 2 小时？我把 Mermaid 写成了“改代码“
前几天团队里有同事在群里吐槽“产品说这个流程要加一个分支我文档里那张流程图得重新画一遍还得截图替换烦死了。”说实话这个场景我太熟了。以前我也是 Visio / ProcessOn 的重度用户拖框、连线、对齐、调颜色一张图半小时起步。结果需求一变图就作废重画一遍还得重新截图、重新贴进文档。更难受的是——图是死的代码是活的图和代码根本没法一起进 Git评审时也看不出这张图改了什么。后来我彻底换了思路图不再画而是写。用的就是 Mermaid。为什么是 MermaidMermaid 是一门用文本描述图表的语言写几行代码就能生成流程图、时序图、类图、甘特图、饼图、状态图等等。它最大的价值不是少装一个画图软件而是这三点✅纯文本可以直接提交进 Git改动一目了然✅可 Review评审代码时顺手就评审了架构图✅随文档走Markdown、Notion、语雀、飞书文档、GitHub README 都能原生渲染举个例子一个登录流程我只要写这么几行是否是否开始是否登录?进入主页跳转登录页输入账号密码验证通过?提示错误产品说验证失败要多加一个’锁定账号’分支我只需要加两行图自动就变了。改图的成本从半小时降到 10 秒。但 Mermaid 也有让人抓狂的地方用了一段时间我发现真正的痛点不在语法而在环境痛点 1写的时候看不见图在本地 VS Code 里写不装插件就只能看到一堆--装了插件版本又经常和线上对不上本地能渲染、GitHub 上报错。痛点 2语法错误定位困难Mermaid 的报错信息非常含蓄经常就是甩一句Parse error on line 3你自己去猜是少了个引号还是箭头写反了。痛点 3想导出图片一堆破事好不容易渲染出来了要贴进 PPT 或者不支持 Mermaid 的平台就得截图——截图糊、缩放变形、背景不透明全是坑。痛点 4官方 Live Editor 有时候打不开mermaid.live 确实好用但它加载慢、偶尔抽风而且界面里塞满了分享、版本切换等一堆功能我只想要左边写代码、右边出图这么一件简单的事。所以我一直在找一个更轻的方案。我现在的做法一个纯在线的双栏编辑器后来我在一个在线工具箱里翻到一个 Mermaid 图表编辑器界面就是最朴素的两栏——左边代码右边实时预览没有登录、没有会员、没有弹窗打开就能写 https://leowh.com/tools/mermaid/index.html我日常用它的原因很简单实时渲染敲完一行右边立刻出图语法错误当场就暴露不用等到提交内置 5 个模板流程图、时序图、类图、甘特图、饼图点一下就载入示例代码忘了语法直接照着改一键导出 SVG矢量图放 PPT 里放大不糊背景干净一键复制代码粘回 Markdown 文档就完事CDN 挂掉也不白屏渲染库不可用时会自动降级成代码高亮预览至少图不会丢这里顺带说一句它内置的模板对新手其实挺友好——比如时序图直接给了一个标准的客户端 / 服务端 / 数据库三段式数据库服务端客户端数据库服务端客户端GET /api/usersSELECT * FROM users返回用户列表200 OK [JSON]甘特图模板也是可以直接抄的2024-01-012024-01-032024-01-052024-01-072024-01-092024-01-112024-01-132024-01-152024-01-172024-01-192024-01-212024-01-232024-01-25需求分析需求评审前端开发后端开发需求阶段开发阶段项目开发计划我一般的工作流是这样的否是点模板载入示例改成自己的内容右边渲染成功?看状态提示改语法复制代码进 Markdown下载 SVG 存进 PPT一句话先抄模板再改内容最后两边一起带走代码 图。它不能替代什么说句实在话这种轻量工具不是万能的我用下来的边界很清楚场景我的选择临时画一张图、写文档配图在线编辑器快长期维护的架构图在线编辑器出图 代码进 GitCI 里批量生成图片mermaid-climermaid-js/mermaid-cli复杂交互、自定义样式官方 Live Editor 或直接嵌 mermaid.js完全内网 / 涉密环境本地 VS Code 插件不要走公网⚠️ 特别提醒任何在线工具都不要粘贴涉密内容。内网项目请老老实实用本地插件。几个我踩过的坑顺便记录一下能帮你少走弯路节点文字里有括号 / 冒号 / 引号一定要加引号包起来A[用户登录(失败)]会报错写成A[用户登录(失败)]就正常了。graph和flowchart不是一回事新语法用flowchart TDgraph是老写法很多新特性比如子图方向只有flowchart支持。甘特图日期格式必须先声明dateFormat YYYY-MM-DD写在title后面不然日期怎么排都不对。导出优先选 SVG不要截图SVG 是矢量的进 PPT、进 Word 都不会糊真要 PNG就用浏览器打开 SVG 再另存。代码一定要留档只存图片 三个月后这张图再也改不动了。图和代码都要留。总结Mermaid 真正改变我的不是画图快了多少而是把图表变成了代码✅ 改图成本从半小时 → 10 秒✅ 图表可进 Git可 Review可追溯✅ 文档、PPT、README 三处共用同一份源码✅ 一个浏览器标签页就够了不用装任何软件如果你也受够了改一次需求重画一次图真的建议试试把图写出来而不是画出来。我现在最常用的组合就是在线编辑器出图 Markdown 存代码 Git 管版本。简单、够用、不折腾。