Mermaid流程图需用Mermaid Preview插件导出PNG/SVG：右键预览区选择下载，若无选项则检查文件后缀、代码块格式并重启VS Code；导出模糊时优先用SVG再转PNG或放大预览后导出PNG。
用 Mermaid 插件画的流程图怎么保存成 PNG 或 SVG
VS Code 本身不直接导出 Mermaid 流程图图片，得靠插件配合——最稳的是 Mermaid Preview（作者：bierner），它支持实时预览 + 导出，但导出功能默认藏在右键菜单里，很多人找不到。
- 确保已安装
Mermaid Preview插件（不是mermaid-markdown-syntax-highlighting那类只做高亮的） - 打开一个
.mmd或含```mermaid代码块的.md文件，右侧会自动弹出预览窗 - 把鼠标移到预览区域 → 右键 → 选
Download as PNG或Download as SVG - 如果右键没反应，先点一下预览区让它获得焦点；导出前建议放大缩放（
Ctrl + =）再下载，否则图太小、字糊
导出的图模糊、文字锯齿严重怎么办
PNG 是位图，缩放或放大后必然失真；SVG 是矢量图，清晰但部分场景（比如贴进 Word/PPT）可能渲染异常。这不是你操作错了，是格式本身的限制。
- 要发文档/打印 → 优先导出
SVG，再用浏览器打开 → 右键另存为 PNG（此时浏览器会按当前缩放渲染，比插件直出更清晰） - 要微信/钉钉发送 → 用插件直出
PNG，但先在预览页按Ctrl + =放大 2~3 倍，再导出，最后用画图工具裁掉白边 - 别用截图工具截预览窗，Mermaid Preview 渲染时有抗锯齿延迟，截图常截到未渲染完的模糊帧
为什么右键没有「Download as…」选项
常见三个原因：插件没生效、文件没被识别为 Mermaid、或者用了不兼容的语法。
- 检查文件后缀是不是
.mmd或.md；如果是.txt或无后缀，插件不会激活预览 - 确认代码块写法是严格的
```mermaid开头，不是```mermaid-js、```flowchart等非标准写法 - 重启 VS Code —— 有时插件加载失败，预览能显示但右键菜单缺失，重启后基本恢复
- 禁用其他 Mermaid 相关插件（比如
Markdown Preview Mermaid Support），它们会冲突，导致功能残缺
不想装插件，有没有命令行快速导出方案
有，但得额外装 Node.js 和 @mermaid-js/mermaid-cli，适合批量导出或 CI 场景，日常单张图反而更麻烦。
- 全局安装：
npm install -g @mermaid-js/mermaid-cli - 导出命令：
mmdc -i diagram.mmd -o diagram.png -b transparent（-b控制背景，transparent适合贴图） - 注意：
mmdc对中文支持弱，若图中含中文且乱码，需加-t "Fira Code, sans-serif"指定字体，且该字体必须系统已安装 - 每次改图都要重跑命令，不如插件右键快；仅推荐用于自动化生成文档图谱
Mermaid 图导出看着简单，实际卡点都在「插件识别」和「渲染时机」上——图还没完全画好就急着右键，或者文件类型不对，都会让导出入口消失。多试一次重启，比查半天文档更快。
