Mermaid代码怎么导出图片？PNG、SVG与中文显示检查

Mermaid代码导出图片，先把代码渲染成图，再选择PNG或SVG保存。PNG适合直接插入汇报、邮件和普通网页；SVG适合支持矢量图的文档与设计环境。无论选哪种，最好同时保存源码，方便以后修改节点、重新生成图片。

如果还需要产品、研发和业务人员一起评审，可通过Boardmix Mermaid图表工作台把图与需求、评论放在同一画布。下面分别说明白板中的图片导出和Mermaid源码编辑器的导出，再用一份完整例子检查中文、边界和文件版本。

先选PNG还是SVG：看图片最终放在哪里

PNG记录像素，放大超过它能承载的尺寸后会模糊。SVG保存矢量图形，但其中也可能包含文字、样式或嵌入内容；字体缺失、接收软件兼容性和导入处理仍可能改变显示。把PNG改名为.svg，不会变成矢量图。

准备一份能复核的源码，再开始导出

下面是构造的“文章发布检查”示例，共7个节点、8条有向连线。内容未通过要回到编辑；预览异常则修正排版并重新预览；两项检查通过后才发布并记录版本。它用于演示导出检查，不代表某个实际系统的审批规则。

flowchart TD
  A[编辑稿件] --> B{内容审核通过}
  B -- 否 --> C[退回修改]
  C --> A
  B -- 是 --> D{预览显示正常}
  D -- 否 --> E[修正排版]
  E --> D
  D -- 是 --> F[发布文章]
  F --> G[记录版本]

将这段纯代码保存为UTF-8编码的article-publish-v1.mmd。粘贴到专用Mermaid源码编辑区时，从flowchart TD开始即可；如果放进支持Mermaid的Markdown文档，则用标记为mermaid的代码围栏包住它。不要把Markdown围栏也当成流程图节点。

渲染后检查两条回流：C回到A，E回到D；B和D各有一个“是”和一个“否”。这一步能发现漏分支或连错节点，不能由“下载成功”代替。还在排查语法问题时，可先阅读Mermaid流程图语法与排错方法。

在Boardmix中导出：先确认画布范围

当Mermaid图已经呈现在白板中，可以继续在旁边放需求原文、版本说明和待确认问题。若只是把现成PNG放入画布，它仍然是图片；选择SVG导出也不会自动把这张PNG内部的节点恢复为可编辑图形。需要保留代码维护能力时，应另外保存原始Mermaid文件。

1. 选定要交付的内容。只交流程图，就框选该图；要连同说明一起交付，则把相关说明也纳入范围。避免把远处的草稿、空白对象一起导出。
2. 打开导出，选择图片格式。Boardmix官方帮助列出PNG、JPG和SVG。按接收端需要选择PNG或SVG，不必为了“更高级”一律选SVG。
3. 核对导出区域。选了局部内容时确认显示为“选中区域”；希望导出全部内容时先取消选择，再确认“全部区域”。画布里有多个独立图时，不要仅凭当前屏幕显示的范围判断导出边界。
4. 选择背景与清晰度。帮助文档列出网格、透明、白色背景，以及标清、高清、超清选项。选PNG时可据目标用途调整；SVG的矢量图形不靠位图倍数提高精度，具体可用设置以当前格式面板为准。
5. 保存后打开实际文件。核对中文、最外层回流箭头和“是/否”，再把图片插入真正要交付的文档。

例如发布检查图要放在深色幻灯片上，透明背景可以避免一大块白底，但深色文字也可能看不清；改用白底，或调整图的配色后重新导出。把整页画布输出成超宽图片再缩小，通常比只导出当前流程图更难阅读。

可用导出设置和账号权限可在当前面板核对。若遇到一直等待、空白或范围缺失，可按白板图片导出异常排查进一步定位。

只有Mermaid代码时：用官方编辑器保存PNG和SVG

无需先搭建网页，也可以直接使用Mermaid Live Editor。Mermaid官方使用指南说明了Code、Preview与Actions的分工：

1. 进入指南链接中的Live Editor，在Code区域粘贴上面的纯Mermaid代码。
2. 在Preview区域确认图已渲染；若出现语法错误，先修正代码，不要把错误提示截图当作导出结果。
3. 找到Actions中的导出选项，选择PNG，保存为article-publish-v1.png。
4. 需要矢量文件时，再选择SVG，保存为article-publish-v1.svg。同时保留前面保存的.mmd源码；Actions也提供Markdown导出。

这里说的是Mermaid Live Editor的功能区，不是Boardmix导出菜单的名称。编辑器中的浏览器历史也不是独立备份：换设备或清理浏览器数据前，先确认源码已另存。

需要重复生成很多图时，可使用命令行

已经使用Node.js工作流的团队，可按Mermaid CLI官方说明安装命令行工具。以下两条命令读取同一个源码文件，分别生成SVG与白底PNG：

mmdc -i article-publish-v1.mmd -o article-publish-v1.svg
mmdc -i article-publish-v1.mmd -o article-publish-v1.png -b white

先完成官方安装步骤，再在源码所在目录运行；没有安装环境时，前面的网页方式更直接。团队重复导出时还应记录实际使用的工具版本，避免同一份源码在不同渲染版本下出现布局差异。

导出后不清晰、中文异常或被裁切，怎样修正

清晰度与可读性要分开看。一张2400像素宽的PNG放在800像素宽的文档栏里，显示尺寸会缩到原来的三分之一。即使线条清晰，原图里30像素高的字显示后也只有约10像素。增大导出像素不会让它在同一版面中自动变大；应减少一屏节点、调整方向，或拆成总览和局部图。

本例使用从上到下的TD方向。若放入横向幻灯片，可尝试改为LR后重新渲染；两种方向都必须保留同样的7个节点、8条连线和分支条件。排版变化不是修改业务规则的理由。

用三条路径检查，再把源码与图片一起交付

导出的PNG和SVG都应能读出下面三条路径：

• 正常发布：A编辑稿件→B是→D是→F发布文章→G记录版本。
• 内容退回：A→B否→C退回修改→A。修改后重新审核，不能直接绕到发布。
• 排版返工：A→B是→D否→E修正排版→D。修完仍须检查预览，不能把回流接到G。

可以按下面的文件清单交付，不需要额外制作一份庞大的说明书：

article-publish-v1.mmd   已确认的Mermaid源码
article-publish-v1.png   文档或汇报使用的图片
article-publish-v1.svg   接收端支持时使用的矢量图
readme.txt              版本、修改人、目标载体及检查结果

readme.txt中写清“v1，7节点/8连线；两个否分支已核对；用于800像素文档栏，接收端检查结果：____”。空项应在实际检查后填写，不能照抄“全部通过”。如果只需要PNG，SVG可以不交；源码和正式图片的版本仍应对应。

放在Boardmix中评审时，可把这份清单放在图旁，标出待确认节点和需要修改的条件。评论提出的建议先由维护者确认，再更新源码和图片；不要假定拖动图像或添加一条评论，仓库里的Mermaid文件就已同步修改。这样既能让非技术成员参与讨论，也能保留下一次修改的可靠入口。