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？一张表说清

为什么优先 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 上写文档的人来说，它把「画个流程图」这件事从「折腾环境」拉回到了「打开网页、粘贴、导出」三步。工具本身不复杂，但省下的时间是真金白银。