用文字画流程图：Mermaid 在线编辑器，改一行图就变

用鼠标拖框画流程图，最麻烦的不是画，是改。挪一个节点，所有连线都要重连。换成用文字描述结构，改起来就只是改一行字。

它解决什么问题

流程图、时序图、状态图在技术文档里很常见，但拖拽式工具画完就成了「死图」—— 想调整顺序、加一个分支，往往要重画大半。

而手绘或截图粘贴的图无法版本管理，团队协作时谁改了哪一版说不清。

核心能力

为什么值得学 Mermaid 语法

因为它能写进 Markdown。几乎所有主流文档平台都支持在代码块里写 mermaid，写完直接渲染成图 —— 这意味着你的架构说明、API 调用流程可以和正文一起维护，不用维护一堆图片文件。

语法本身很少：节点用方括号表示、箭头用 –> 表示、子图用 subgraph 包裹。花二十分钟过一遍官方文档，之后画图的速度比拖拽快得多。

谁适合用

• 写技术文档、需要画流程图与架构图的工程师
• 整理业务流程的产品与运营
• 用 Markdown 写笔记、想把图也纳入版本管理的人
• 做技术分享需要快速改图的人

怎么开始

1. 打开 mermaid.live，左侧默认就有一个示例，改动它即刻生效。
2. 流程图起步：A[开始] –> B{判断}，方括号是矩形节点，花括号是菱形判断节点。
3. 时序图：participant 声明参与方，->> 表示请求，–>> 表示返回。
4. 导出用右上角菜单，SVG 适合插进文档，PNG 适合贴到聊天工具。
5. 要嵌进网页：用生成的 embed 代码，或直接在自己的页面里引入 mermaid 库。

常见问题

画复杂架构图够用吗？
分层架构、调用关系可以。需要自由布局与精细对齐的大图，还是拖拽式工具更合适。

支持中文吗？
支持，节点文字可以是中文，注意中文要以引号包裹以避免解析问题。

能导出高清图吗？
导出 SVG 就是矢量，任意放大不失真。

学起来难吗？
基础流程图二十行语法就能覆盖，复杂语法按需查文档即可。

授权与合规

Mermaid 以 MIT 许可开源，官方在线编辑器免费使用，生成的图可自由用于文档与商业项目。 官网：mermaid.live。