把 AI 给的 Mermaid 代码导成 SVG 和 PNG，附本地编辑器

AI 给了一段 Mermaid 流程图代码，接下来还要改两个节点、放进文档里，这时留着源码会方便很多。附件做了一个本地小编辑器：左边改字和连线，右边看图，确认后下载 SVG 或白底 PNG。

渲染库已经随包放好，不需要模型账号、密钥或 Node。里面也放了成品 SVG、PNG 和完整提示词，想直接用示例图可以取成品。

怎么用

解压整个包，保留 index.html 和 mermaid.min.js 在同一目录，用现代桌面浏览器打开 HTML。点“生成预览”，再点“下载 SVG”或“下载 PNG（2 倍）”。如果浏览器限制直接打开本地文件，README 有本机 HTTP 启动办法；本次实际验证用的就是本机 HTTP 路径。

默认图有7个节点、6条连线，判断的“是”走向作答和附编号，“否”走向说明缺口和请求补充。这只是固定教学示意，“证据足够吗”那个判断框没有实现充分性判断，也不能靠画一个框保证回答正确。

先把左边的“读者问题”改成“新的问题”试一下。改字后，旧预览会清空，下载按钮变灰；重新生成成功才会启用，避免源码变了却下载到上一次的图。

也可以清空左边，粘贴下面这份最小源码再生成。只贴源码，去掉外层代码围栏：

flowchart TD
    A[读者问题] --> B[检索资料片段]
    B --> C{证据足够吗？}
    C -->|是| D[依据片段作答]
    D --> E[附上片段编号]
    C -->|否| F[说明证据缺口]
    F --> G[请求补充资料]

如果想让 AI 按自己的业务画，随包 prompt.txt 给了完整要求：输出可保存的 Mermaid 源码，节点短一点，是/否标在对应箭头上，两个分支各有终点。拿到后仍要自己核对连线是否符合实际流程。

SVG 和 PNG 怎么选

SVG 保留矢量图形，适合继续缩放；这一份没有嵌入字体，换台机器可能换字形，某些查看器的排版也可能不同。PNG 固定本次渲染外观，适合直接贴文档。示例 SVG 是360×668，导出的 PNG 是720×1336，“2倍”指像素宽高各翻倍。

工具只接受普通短文本 flowchart / graph，元数据仅支持一行 title。外链、图片/图标节点、click、HTML标签、初始化配置和自定义资源会被拒绝；这是这个小工具的范围，不是 Mermaid 全部能力。语法出错也会显示错误并禁用下载，修正后再生成。

本地用 Mermaid 12.2.0、Chromium 154 实际跑了21项检查，包含下载文件、改字、坏语法、资源输入拒绝和失败后恢复；打包后从新目录解压又跑了一遍。也检查了390像素宽视口，手机上的文件下载和其他浏览器还没覆盖。预览中的中文和分支箭头已实际查看，记录在包里的 VERIFICATION.json。

下载本地编辑器、可编辑源码、SVG/PNG成品、完整提示词与验证记录（ZIP，9个文件）

参考：Mermaid 的浏览器 API、flowchart 与 htmlLabels 文档，MDN 的 Blob、Object URL 和 Canvas 导出文档，2026-10-23查阅。