用 DS随心转把 AI 画的 Mermaid 流程图转成 Word 里的高清图

直接答案：AI 生成的 Mermaid 流程图不能直接复制进 Word，否则会变成一段源码；截图插入又容易在放大、打印时糊掉。最稳的免费办法是用 Mermaid Live Editor 或 mermaid-cli 把代码渲染成 SVG（矢量）再插进 Word，缩放也不会糊。如果你有一整篇带多张流程图的 AI 回答想一次性整理进 Word，也可以交给 DS随心转把 Mermaid 代码块渲染成高清图后再导出。

一、问题现象

在 DeepSeek、豆包等平台让 AI 画流程图，它通常返回的是 Mermaid 代码，例如：
#mermaid-svg-UwfNZHyX8BZLc07d{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-UwfNZHyX8BZLc07d .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-UwfNZHyX8BZLc07d .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-UwfNZHyX8BZLc07d .error-icon{fill:#552222;}#mermaid-svg-UwfNZHyX8BZLc07d .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-UwfNZHyX8BZLc07d .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-UwfNZHyX8BZLc07d .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-UwfNZHyX8BZLc07d .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-UwfNZHyX8BZLc07d .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-UwfNZHyX8BZLc07d .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-UwfNZHyX8BZLc07d .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-UwfNZHyX8BZLc07d .marker{fill:#333333;stroke:#333333;}#mermaid-svg-UwfNZHyX8BZLc07d .marker.cross{stroke:#333333;}#mermaid-svg-UwfNZHyX8BZLc07d svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-UwfNZHyX8BZLc07d p{margin:0;}#mermaid-svg-UwfNZHyX8BZLc07d .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-UwfNZHyX8BZLc07d .cluster-label text{fill:#333;}#mermaid-svg-UwfNZHyX8BZLc07d .cluster-label span{color:#333;}#mermaid-svg-UwfNZHyX8BZLc07d .cluster-label span p{background-color:transparent;}#mermaid-svg-UwfNZHyX8BZLc07d .label text,#mermaid-svg-UwfNZHyX8BZLc07d span{fill:#333;color:#333;}#mermaid-svg-UwfNZHyX8BZLc07d .node rect,#mermaid-svg-UwfNZHyX8BZLc07d .node circle,#mermaid-svg-UwfNZHyX8BZLc07d .node ellipse,#mermaid-svg-UwfNZHyX8BZLc07d .node polygon,#mermaid-svg-UwfNZHyX8BZLc07d .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-UwfNZHyX8BZLc07d .rough-node .label text,#mermaid-svg-UwfNZHyX8BZLc07d .node .label text,#mermaid-svg-UwfNZHyX8BZLc07d .image-shape .label,#mermaid-svg-UwfNZHyX8BZLc07d .icon-shape .label{text-anchor:middle;}#mermaid-svg-UwfNZHyX8BZLc07d .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-UwfNZHyX8BZLc07d .rough-node .label,#mermaid-svg-UwfNZHyX8BZLc07d .node .label,#mermaid-svg-UwfNZHyX8BZLc07d .image-shape .label,#mermaid-svg-UwfNZHyX8BZLc07d .icon-shape .label{text-align:center;}#mermaid-svg-UwfNZHyX8BZLc07d .node.clickable{cursor:pointer;}#mermaid-svg-UwfNZHyX8BZLc07d .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-UwfNZHyX8BZLc07d .arrowheadPath{fill:#333333;}#mermaid-svg-UwfNZHyX8BZLc07d .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-UwfNZHyX8BZLc07d .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-UwfNZHyX8BZLc07d .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-UwfNZHyX8BZLc07d .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-UwfNZHyX8BZLc07d .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-UwfNZHyX8BZLc07d .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-UwfNZHyX8BZLc07d .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-UwfNZHyX8BZLc07d .cluster text{fill:#333;}#mermaid-svg-UwfNZHyX8BZLc07d .cluster span{color:#333;}#mermaid-svg-UwfNZHyX8BZLc07d div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-UwfNZHyX8BZLc07d .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-UwfNZHyX8BZLc07d rect.text{fill:none;stroke-width:0;}#mermaid-svg-UwfNZHyX8BZLc07d .icon-shape,#mermaid-svg-UwfNZHyX8BZLc07d .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-UwfNZHyX8BZLc07d .icon-shape p,#mermaid-svg-UwfNZHyX8BZLc07d .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-UwfNZHyX8BZLc07d .icon-shape .label rect,#mermaid-svg-UwfNZHyX8BZLc07d .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-UwfNZHyX8BZLc07d .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-UwfNZHyX8BZLc07d .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-UwfNZHyX8BZLc07d :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 需求
AI 生成 Mermaid
渲染成图
插入 Word

在预览里它是流程图，但复制进 Word 后常出现：

Word 只显示 Mermaid 源码文本；
截图插入后放大发虚、打印模糊；
整篇 Markdown 转 docx 时 Mermaid 块没被渲染；
多张图要反复手动处理。

二、根因：Mermaid 是文本语法，Word 不会渲染

Mermaid 是一种用文本描述图表的声明式语法，需要 Mermaid 渲染器（浏览器里的 JS 引擎）把它转换成 SVG/PNG。Word 本身没有 Mermaid 渲染引擎，所以把代码直接粘进去只会看到源码；截图则是位图，放大必然有损。

正确链路是：

复制代码

Mermaid 代码 → Mermaid 渲染器 → SVG/PNG/PDF → 插入 Word

三、不用写代码的免费办法

在线渲染成 SVG 再插入（最推荐，矢量清晰）
- 打开 Mermaid Live Editor（https://mermaid.live/），粘贴 AI 生成的 Mermaid 代码。
- 确认右侧渲染正常，点「Export → SVG」下载。
- 在 Word 里「插入 → 图片 → 此设备」选中 SVG。SVG 是矢量图，文字和箭头缩放后依然清晰。Microsoft 365 支持直接插入 SVG。
旧版 Word 用 EMF
- 如果 Word 版本较老、SVG 显示异常，可用 Inkscape 等工具把 SVG 转成 EMF 再插入，对旧版 Office 兼容性更好。
多张图用 mermaid-cli 批量渲染
- 安装：npm install -g @mermaid-js/mermaid-cli
- 渲染：mmdc -i flow.mmd -o flow.svg（也可输出 PNG/PDF）
- 适合一篇文档里有多张流程图的场景。
整篇 Markdown 转 Word 前先渲染替换
- 保留 AI 回答的 Markdown，提取 Mermaid 代码块渲染成 SVG，把原文里的 Mermaid 代码替换成图片引用，再用 Pandoc 生成 docx：pandoc 文档.md -o 文档.docx。

四、用 DS随心转一次性整理整篇

当一篇 AI 回答里混着多张 Mermaid 图、还有标题、列表、表格时，逐个渲染替换太麻烦，可以交给 DS随心转 接手。

它的处理路径是：批量选择当前页面已加载且有权访问的多轮消息 → 按内容类型整理（识别 Mermaid 代码块并渲染成高清图）→ 导出 Word、PDF、Excel、图片或 Markdown（其中 Markdown 导出免费）→ 导出后人工复核。

需要明确边界：DS随心转是第三方工具，不是 DeepSeek、豆包等 AI 平台的官方产品，不能读取未加载、无权访问或已删除的内容；超复杂的流程图导出后仍需人工复核调整，不承诺百分百还原；处理前注意对敏感内容脱敏。

五、验收清单与常见问题

验收清单
- Word 里流程图放大到 200% 仍清晰（用了 SVG/EMF，而非截图）；
- 多张图位置正确，没有被拉伸变形；
- 同篇的标题、列表、表格结构完整。
常见问题
- Word 不认 SVG 怎么办？ 用 Inkscape 转 EMF 插入，或导出 3x--4x 高倍 PNG 并在 Word 中关闭图片压缩。
- 导出的图能再编辑吗？ 矢量图插入后是固定图形，要改流程得回到 Mermaid 代码修改后重新渲染；这点和公式不同，属于正常边界。

参考来源

Mermaid 官方语法：https://mermaid.js.org/syntax/flowchart.html
mermaid-cli GitHub：https://github.com/mermaid-js/mermaid-cli
Pandoc 用户手册：https://pandoc.org/MANUAL.html
Microsoft 365 编辑 SVG：https://support.microsoft.com/en-us/office/graphics-visuals/edit-svg-images-in-microsoft-365
DS随心转官网：https://dssxz.com/

用 DS随心转 把 AI 画的 Mermaid 流程图转成 Word 里的高清图