Mermaid 怎么导出图片？用 mermaid-cli 可以将图表导出为 SVG 或 PDF。
Mermaid 能根据文本生成图表，很适合与文档一起纳入版本管理。要把图放进论文、幻灯片或海报，还需要明确导出格式和尺寸。PNG 的像素尺寸如果不足，按预定大小打印时就可能显得模糊。
通过命令行导出
官方工具
@mermaid-js/mermaid-cli 提供了 mmdc 命令：npm install -g @mermaid-js/mermaid-cli
mmdc -i diagram.mmd -o diagram.svg # vector, preferred
mmdc -i diagram.mmd -o diagram.pdf # vector PDF
mmdc -i diagram.mmd -o diagram.png -s 3 # raster at 3x scale只要目标软件或投稿平台支持，优先选择 SVG 或 PDF。 其中的矢量线条和文字可以清晰缩放，但嵌入的位图仍受原始分辨率限制。如果必须使用 PNG，应设置缩放倍数，再按最终印刷尺寸和分辨率要求检查导出文件的像素尺寸。
| 格式 | 是否支持矢量 | 适用场景 | 不适用的情况 |
|---|---|---|---|
| SVG | 可容纳矢量内容 | 网页展示、后续编辑 | 目标平台不接受 SVG |
| 可容纳矢量内容 | 论文、印刷、幻灯片 | 接收文件的软件无法保留所需元素 | |
| PNG | 否 | 预览，以及必须使用位图的场景 | 像素尺寸不足以满足最终使用尺寸 |
其他导出方式
VS Code。 Mermaid 预览扩展可以在编写文档时直接显示图表。不同扩展的导出能力各有差异；需要明确导出 SVG、PNG 或 PDF 时，可以使用上面的命令行方式。
Mermaid Live Editor。 浏览器中的编辑器支持导出 SVG，也提供图片渲染链接，适合临时处理单张图。使用在线渲染服务时，图表文本可能会发送到服务端；涉及敏感内容时，应在本地通过命令行渲染。
CI 流水线。
mmdc 是命令行工具，因此可以加入构建流程。常见做法是把 .mmd 源文件提交到仓库，在构建文档时生成图片，让图像随源码同步更新。- run: npm install -g @mermaid-js/mermaid-cli
- run: mmdc -i docs/architecture.mmd -o docs/architecture.svg
调整图表外观
Mermaid 的默认样式主要面向文档。用于论文图表时，以下三项设置尤其值得检查：
- 主题。 在图表的 YAML 前置配置中，将
config下的主题设为theme: neutral。确定印刷用的主题前，先按最终使用尺寸预览效果。 - 字体。 在配置中设置
fontFamily，并确认渲染环境已安装所选字体。 - 布局方向。
graph LR和graph TD会改变图表的宽高比例。要把图放进论文的单栏版面，这项设置往往比想象中更有影响。
---
config:
theme: neutral
fontFamily: Helvetica
---
graph LR
A[Sample collection] --> B[Extraction]
B --> C[Sequencing]
C --> D[Analysis]
什么时候该换一种绘图工具
Mermaid 会自动计算布局，能够直接控制的排版细节有限。自动布局让文档绘图更方便；但在科研插图中，元素的位置和构图本身也可能承载信息。
如果需要精确安排元素的位置、遵循期刊的视觉规范，或者通过位置表达解剖关系、时间顺序等实际关系，就值得换用其他工具。一种折中做法是先用 Mermaid 搭好结构，导出 SVG，再到矢量编辑器中完成细节。不过，手动编辑后的结果无法再仅靠 Mermaid 源码完整重现。
提示
将
.mmd 源文件和导出的图片一起提交。源码便于审阅差异，也方便在内容变动后重新生成；图片则便于直接查看。只保留其中一种，就要在修改可追溯性与查看便利性之间作取舍。如果图表的构图超出了 Mermaid 的能力，可以用 SciFig 的文字转图表工具或文字生成科研插图，先根据自然语言描述生成初稿。接着检查图的结构，将位图矢量化为可编辑的 SVG，再在浏览器画布中修正细节。完整流程可参考科研成果可视化指南。
延伸阅读
相关阅读: 即时可视化：用 AI 文字转配图技术呈现复杂研究概念, 2026 年 10 款最佳科研插图工具：AI 与传统对比.
