Mermaid 在线预览指南

Mermaid 在线预览指南 的价值不只是“在线看一眼图”。对开发者来说，图表源码本身也是文档资产：它要能被复制、能被预览、能被导出，也要能在半年后继续修改。

当你处理下单流程、入门流程、发布流程或故障复盘时间线时，可以先建立一个短闭环：粘贴源码、查看预览、修正语法和命名、最后再导出。

不要一开始就把完整生产内容贴进去。先用一个很小的片段确认渲染方向、标签长度和布局关系。

第一版预览通过后，再把真实服务名、字段、角色或依赖关系逐步加进去。小步调试比在一大段 AI 生成内容里找错舒服得多。

把预览结果当成同事会看到的页面来检查：它是否回答了一个明确问题？不看上下文能否理解主要关系？

如果内容来自 AI，要重点检查节点命名、方向、分组和缺失关系。AI 很容易生成“看起来很像”的图，但漏掉错误流程、协议、环境边界或所有权。

最常见的问题是想让一张图解释所有东西。更好的做法是拆成请求流、数据结构、部署拓扑和发布截图几个小预览。

另一个问题是只保存截图，不保存源码。建议把源文本和 SVG/PNG 一起放进文档或仓库，这样后续改图可以像改代码一样 review。

发布前检查三件事：导出图片是否清晰，最长标签是否换行合理，文章里是否能看到可复现的输入片段。

好的工具页不应该只说“支持在线预览”，而应该展示输入长什么样、预览发现了什么、最后如何决定导出。