Mermaid Live Editor 这个页面，我隔一阵就会打开一次。 不是天天用。 一般是写文档写到一半，突然发现某段流程用文字讲太绕。用户请求进来，服务拆成几步，哪里判断，哪里返回。继续写下去，自己都快看乱了。 这时候复制一段 Mermaid 代码进去，右边直接出图。 flowchart LR
A[提交请求] --> B{校验通过？}
B -->|是| C[执行任务]
B -->|否| D[返回错误]
改节点，图跟着变。 箭头写错了，也马上能看到。比在文档里反复保存、刷新，再等渲染要省事一些。 我用它最多的还是流程图和时序图。 时序图尤其明显。几个服务互相调用，光靠文字写“先请求 A，再调用 B，最后由 C 返回”，写两轮就开始打结。换成 Mermaid，谁调用谁，一眼就能对上。 甘特图也能画，不过我自己用得少。项目排期一复杂，代码照样会变长，最后又开始盯着日期改来改去。能用，但谈不上多轻松。
Mermaid Live Editor 还有个很实用的地方：分享链接。 图画完，不一定要截图。直接把链接丢给同事，对方打开就能看到代码和图。需要改的话，在原来的基础上继续动几行，再发一个新链接。 这种小动作挺省事。 尤其是线上聊需求时，大家最怕收到一张模糊截图。图里少了一条线，还得重新问原文件在哪。链接至少不会把代码弄丢。 导出 SVG 也保留着。 写 README、技术文档，或者放进演示稿里，SVG 比普通截图清楚。放大不会糊，后面改了还能重新导出。 当然，Mermaid 不是拖拽工具。 图一复杂，左边还是会堆出几十行代码。布局偶尔也不太听话，想把某个节点挪到指定位置，折腾半天，它可能还是按自己的方式排。 我一般不跟它较劲。 能把关系讲清楚就行。真要做一张漂亮的架构图，还是会换别的工具。
Mermaid Live Editor 更像一个临时工作台。打开，贴代码，看图，改两下，发链接。 用完就关。
GitHub 地址：openspug/spug