Mermaid 在线编译器怎么用：从流程图代码到导出图片

你想画一个流程图，却不想先安装完整绘图软件，可以先用 Mermaid 在线编译器验证语法、预览结果并导出图片。高效用法不是直接粘贴一大段复杂代码，而是从一个节点开始，逐步加入分支、样式和说明，每次只修一个语法错误。本文从流程图和时序图两个例子开始，并说明如何把图的版本与文档一起管理。本文适用于使用 Mermaid Live Editor 编写流程图和时序图的读者，覆盖最小源码、错误回退、导出和源码留存；不同编辑器的按钮位置可能变化，语法判断以 Mermaid 解析结果为准。

一、先用最小图确认编译链路

Mermaid图表由代码生成，最小样例能快速判断编辑器是否支持当前语法版本。先写一个开始节点和结束节点，再逐步加入条件。遇到报错时保留能编译的最后版本，方便回退。

flowchart TD
  A[开始] --> B[检查输入]
  B --> C[结束]

运行后应看到： 最小 flowchart 能在预览区正常渲染。

二、流程图分支要给条件命名

分支箭头上的条件比节点颜色更重要。用“有效/无效”“成功/失败”等互斥标签，读者才能沿着路径复现。节点文字不要塞入整段说明，细节放在正文或旁边的表格。

如果这里的基础语法还不熟，可以先查 Markdown 语法说明，再回到下面的完整示例。

flowchart TD
  A[提交表单] --> B{校验通过?}
  B -->|是| C[保存数据]
  B -->|否| D[返回错误]

运行后应看到： 每个分支都有“是/否”等明确条件。

三、时序图适合说明调用关系

当问题涉及浏览器、服务端和数据库之间的先后顺序时，时序图比长段落更清楚。参与者名称保持稳定，错误分支用note或alt表达，不要把所有日志行都画进去。

sequenceDiagram
  participant U as 用户
  participant S as 服务
  U->>S: 提交请求
  S-->>U: 返回结果

运行后应看到： 时序图按调用先后显示请求与响应。

四、错误信息要回到最小变更

编译器报错通常指向当前行，但真正原因可能在上一行缺少括号或缩进。先删掉最后加入的节点，确认基础图能编译，再逐项恢复。需要统一主题时，把 Mermaid 初始化指令放在源码顶部。

如果这里的基础语法还不熟，可以先查 Markdown 入门课程，再回到下面的完整示例。

%%{init: {"theme":"default","themeVariables":{"primaryColor":"#fe6a00"}}}%%
flowchart LR
  A[输入] --> B[处理] --> C[输出]

运行后应看到： 删掉最后新增节点后恢复可编译状态。

五、导出图片前检查可读性

在 mermaid.live 中先点击编辑器的导出按钮，按用途选择 PNG 或 SVG；同时保存 .mmd 源码，后续才能修改节点。长文本、移动端缩放和颜色对比都要在导出前检查。

const exportChecklist=["文字不被裁切","分支有标签","颜色有对比","源码已保存"];
console.log(exportChecklist);

运行后应看到： 导出 PNG/SVG 的同时保留 .mmd 源码。

在线编辑与导出

可在 Mermaid Live Editor（mermaid.live）粘贴源码，先确认预览，再使用导出菜单生成 PNG 或 SVG。源码应以 .mmd 文件提交，图片只作为展示结果；这样修改节点时无需重新手动画图。

从源码到可交付图片

在 Mermaid Live Editor（mermaid.live）粘贴最小 flowchart TD，确认预览后再加入分支、样式和说明。节点文字尽量短，复杂解释放在正文或表格；出现语法错误时回到最后可编译版本，一次恢复一个节点。

导出前检查长文本是否被裁切、分支是否有方向标签、颜色对比是否足够、移动端缩放是否可读。PNG 适合直接插入文章，SVG 适合需要缩放的页面；无论选择哪种，都把 .mmd 源码和主题配置一并提交。

交付记录应包含 Mermaid 版本或编辑器链接、源码文件名、导出格式和最后一次预览结果。后续修改先改源码再重新导出，禁止只在图片上手工涂改，否则下一次变更无法复现。

怎么判断该选哪条路径

Mermaid 的排错方式更像写代码：先保留一个能编译的最小版本，再一次加入一个节点或一条分支。报错行不一定是真正原因，上一行缺括号或引号也会影响解析。图能导出还不够，还要检查分支标签、文字裁切、移动端缩放和颜色对比。最终同时保存图片与 .mmd 源码，下一次修改才可复现。

保存成功和失败两份最小源码

先保存只有 A --> B 的成功版本，再故意删除一个右括号制造语法报错，记录编辑器指向的行号；恢复括号后逐个加入条件分支。然后把长说明从节点中移到正文，分别导出 PNG 和 SVG，检查文字是否裁切。这个样例能区分解析错误、布局拥挤和导出问题。实际运行结果应包含可编译的 .mmd、失败源码、错误信息与最终图片；仅有截图而没有源码，后续无法复现。

选择 PNG 还是 SVG

使用位置	推荐格式	原因
普通文章配图	PNG	兼容稳定、预览一致
需要任意缩放	SVG	放大后文字与线条仍清晰
需要继续编辑	`.mmd` 源码	图片格式不能恢复节点语义
社媒或聊天预览	PNG	不依赖浏览器执行脚本

导出前在目标宽度下预览一次。流程图在桌面端可读，不代表缩到手机宽度后仍能看清；必要时把横向图改成纵向，或把一个大图拆成两张。提交时同时记录主题和导出尺寸，避免不同成员导出后颜色、字体和留白不一致。

排错速查

症状	先检查什么	处理建议
新增节点后报错	回到最后可编译版本	一次恢复一行并检查上一行语法
导出文字被裁切	检查节点文本和画布比例	缩短节点文字，说明移到正文

Mermaid 在线编译器怎么用：从流程图代码到导出图片的验证流程

总结

Mermaid 在线编译器适合快速验证图表语法和导出结果。先从最小流程图开始，再加入分支和时序关系；遇到错误回退到最后可编译版本。交付时同时保存源码、版本和导出图，后续修改才不会重新手动画图。

延伸学习

下面三项分别用于系统学习、补充同主题案例和随手查阅。

常见问题

Q：Mermaid报错应该从哪里开始查？

A：回到最后一个可编译版本，逐项恢复最近修改；上一行缺少括号或缩进也可能导致当前行报错。

Q：PNG和SVG怎么选？

A：PNG适合直接插入文章，SVG适合需要缩放和后续编辑的场景；无论哪种格式都要保留源码。