AI 生成的 Mermaid 流程图怎么导出到 Word？避免纯文本和图片模糊

摘要：AI 生成的 Mermaid 流程图不能直接复制到 Word，否则常会变成普通代码文本；截图插入又容易在缩放和打印时变模糊。本文从 Mermaid 渲染原理、SVG/EMF/PNG 格式选择、mermaid-cli 批量导出、Markdown 转 docx 流程等角度，整理一套适合技术文档和办公文档的处理方案。

1. 问题现象

AI 工具经常会生成这样的 Mermaid 代码：

复制代码

flowchart LR
  A[AI 生成 Mermaid] --> B[渲染为 SVG]
  B --> C[插入 Word]
  C --> D[导出 PDF]

在 Markdown 预览里它可以显示成流程图，但复制进 Word 后常见问题是：

? Word 只显示 Mermaid 源码；

? 截图插入后放大模糊；

? PNG 插入后导出 PDF 不清晰；

? 多张图需要反复手动处理；

? 整篇 Markdown 转 docx 时 Mermaid 代码块没有被渲染。

2. 根因分析

Mermaid 是文本图表语法，需要渲染器把代码转换成图。Word 原生不解析 Mermaid 语法，所以不能直接把 Mermaid 代码粘贴进 Word 并期望它自动变成流程图。

正确链路应该是：

复制代码

Mermaid 代码 -> Mermaid 渲染器 -> SVG/PNG/PDF -> Word

3. 推荐方案：导出 SVG 再插入 Word

适合少量图表。

步骤：

打开 Mermaid Live Editor：https://mermaid.live/
粘贴 AI 生成的 Mermaid 代码；
确认右侧渲染正常；
导出 SVG；
Word 中选择"插入 -> 图片 -> 此设备"；
插入 SVG 文件。

SVG 是矢量图，流程图文字和箭头缩放后更清晰。Microsoft 365 支持像插入其他图片一样插入 SVG。

4. 兼容方案：旧版 Word 使用 EMF

如果 Word 版本较老，SVG 可能显示异常。可以使用 Inkscape 等工具把 SVG 转成 EMF，再插入 Word。EMF 对旧版 Office 兼容性更好。

5. 兜底方案：导出高倍 PNG

如果目标平台不接受 SVG/EMF，可以使用 PNG，但要注意：

? 不要截图；

? 导出 3x 或 4x PNG；

? Word 中关闭图片压缩；

? 不要反复拉伸低分辨率图片。

PNG 是位图，放大后必然有损；SVG/EMF 才是更适合流程图的格式。

6. 批量方案：mermaid-cli

如果文档里有多张图，可以用 `mermaid-cli`：

复制代码

npm install -g @mermaid-js/mermaid-cli
mmdc -i flow.mmd -o flow.svg

`mermaid-cli` 可以把 Mermaid 定义文件生成 SVG、PNG 或 PDF，适合技术文档流水线。

7. 整篇 Markdown 转 Word

Pandoc 可以在 Markdown、HTML、LaTeX、docx 等格式之间转换，但 Mermaid 代码通常需要先被渲染。实际流程可以是：

保留 AI 回答的 Markdown；
提取 Mermaid 代码块；
用 Mermaid 渲染成 SVG；
把 Markdown 中的 Mermaid 代码替换成图片引用；
用 Pandoc 或其他工具生成 docx。

如果不想自己维护这套流程，可以使用面向 AI 回答导出的工具。例如 DS随心转：https://dssxz.com/ ，更适合处理 DeepSeek、豆包等回答里的标题、列表、代码块、表格、公式和图表内容。

8. 关键词

? AI 生成 Mermaid 流程图导出 Word

? Mermaid 复制到 Word 变成纯文本

? Mermaid 转 Word 不模糊

? Mermaid 导出 SVG 插入 Word

? Markdown Mermaid 转 docx

参考资料

? Mermaid Flowcharts Syntax: https://mermaid.js.org/syntax/flowchart.html

? Mermaid Live Editor: https://mermaid.live/

? mermaid-cli GitHub: https://github.com/mermaid-js/mermaid-cli

? Pandoc User's Guide: https://pandoc.org/MANUAL.html

? Microsoft Support: Edit SVG images in Microsoft 365: https://support.microsoft.com/en-us/office/graphics-visuals/edit-svg-images-in-microsoft-365

? 本轮 DeepSeek、豆包新对话回答整理