Win7 离线导出 Mermaid 流程图：SVG + PNG 双格式网页工具
1. 为什么要在 Win7 上折腾这件事
Win7 上写文档、做 PPT 的人不少，但一旦要画流程图，麻烦就来了：
- 在线 Mermaid 编辑器要联网，公司内网、隔离环境直接打不开；
- 想用 mermaid-cli 导出图片，得装 Node.js，还要拉 Chrome/puppeteer，Win7 上各种版本不兼容，报错能报一整天；
- 截图贴进 Word，放大就糊，投影到大屏更是惨不忍睹。
所以这里给出一个更省事的方案：一个纯前端网页工具，双击打开就能用，完全离线，导出 SVG（矢量）+ PNG 两种格式。不用装任何东西，没有 Chrome/puppeteer 这类坑。
2. 工具原理：为什么它能离线跑
核心思路很简单：把 Mermaid 的运行库mermaid.min.js下载到本地，让网页直接引用本地文件，而不是从 CDN 加载。
mermaid导出工具.html ← 页面 + 渲染逻辑 mermaid.min.js ← Mermaid 运行库（本地文件）浏览器打开 HTML 时，<script src="mermaid.min.js">会从同目录读取这个文件，整个过程不产生任何网络请求，所以断网也能用。
⚠️ 注意：两个文件必须放在同一个文件夹里。
浏览器方面，Win7 上装 Chrome 109、Edge（最后一个支持 Win7 的版本）或 Firefox 115 ESR 都能正常跑。
2.1 内置 Mermaid 版本与语法兼容性
工具内置的 Mermaid 版本是11.17.2，在win7系统里MarkText 里常用的这几类图有时无法渲染，在离线工具里全部向后兼容，照常渲染：
flowchart/graph：流程图，最常用的一类；sequenceDiagram：时序图；classDiagram：类图；stateDiagram：状态图；erDiagram：实体关系图；gantt：甘特图；fishbone diagram：鱼骨图；pie：饼图。
也就是说，把你 MarkText 里的图直接贴进离线工具，基本不会卡在版本语法上——不需要为了这个工具去改写图类型，也不用担心「MarkText 能画、工具画不出来」这种尴尬。
💡 真遇到报错怎么办？工具会在红框里给出错误信息，红框里的信息就是修改依据。多数情况是括号没闭合、箭头写错、节点 id 用了非法字符这类小问题，照着提示改一行就好，不用怀疑是版本不兼容。
3. 使用步骤
3.1 准备文件
把下载的压缩包先解压出mermaid导出工具.html和mermaid.min.js并放到同一个文件夹，例如D:\tools\mermaid\。
本工具已打包上传到 CSDN 资源区。
- mermaid 离线导出工具（HTML + mermaid.min.js）
几点说明：
- 下载后先解压，把
mermaid导出工具.html和mermaid.min.js放在同一个文件夹里，再双击打开 HTML，否则就是白屏。 - 两个文件缺一不可，只拷 HTML 过去同样打不开，这是最常见的踩坑点。
3.2 打开页面
双击mermaid导出工具.html；如果默认程序不是浏览器，右键 → 打开方式 → 选择 Chrome / Edge。
3.3 粘贴 Mermaid 代码
从 MarkText 里复制代码：选中以```mermaid开头的整段内容。围栏一起选也没关系，工具会自动去掉首尾的代码围栏标记。
粘贴到左侧文本框后，右侧会实时预览渲染结果。
3.4 调整主题与背景
- 主题选
default，背景选白色，适合大多数文档场景； - 如果图太宽、文字挤在一起，把主题换成
neutral试试，配色更素、留白更舒服。
3.5 导出
- 点「下载 SVG（矢量）」→ 在 Word/PPT 里用「插入 → 图片」选中它；
- 需要位图就点「下载 PNG」，倍率选2x（普通文档）或3x（印刷/大屏）。
4. SVG 还是 PNG？一张表说清
| 场景 | 推荐格式 | 原因 |
|---|---|---|
| Word 2016+ / PPT 2016+ | SVG | 矢量放大不糊，文字还能在 Office 里重新着色 |
| 投影大屏、印刷 | SVG | 任意缩放不失真 |
| Word 2013 及更早 | PNG（3x） | 老版本不支持 SVG 插入 |
| 公众号、网页 | PNG（2x） | 平台对 SVG 支持不稳定 |
为什么优先 SVG：矢量图放大到投影大屏也不糊，而且 Word 里文字还能重新着色，改配色不用回炉重画。Word 2016 及以上、PPT 2016 及以上都直接支持 SVG；如果是 Word 2013 及更早，或者要贴到公众号/网页，就用 PNG。
5. 常见问题
打开是白屏？
先检查mermaid.min.js是否和 HTML 在同一个文件夹、文件名是否完全一致（注意别被系统加了(1)后缀）。
预览正常但导出空白？
多半是代码里有语法错误，Mermaid 渲染失败但页面没明显报错。把代码贴到在线编辑器验证一下语法，或者先简化成最小示例逐步加回来。
中文显示成方块？
检查系统字体，Win7 建议保留微软雅黑；也可以在 Mermaid 配置里指定fontFamily。
图太宽超出画布？
换neutral主题，或在 Mermaid 代码里用flowchart LR改成横向布局、拆分 subgraph。
6. 小结
这套方案的价值就三点：离线可用、零安装、矢量输出。对于还在 Win7 上写文档的人来说，它把「画个流程图」这件事从「折腾环境」拉回到了「打开网页、粘贴、导出」三步。工具本身不复杂，但省下的时间是真金白银。