Mermaid 图表导出方法大全：PNG、SVG、PDF 一站式解决方案

Mermaid 的"图表即代码"理念虽然极大提升了绘图效率，但在实际工作中，我们往往需要将绘制好的图表导出为通用图片格式，以便插入到 PPT、Word、PDF 或博客文章中。不同的使用场景对导出格式、图片质量和操作便捷性有着不同的要求。

本文将系统梳理 Mermaid 图表的四种主要导出途径，帮助你根据具体需求选择最合适的方案。

导出格式对比

在深入具体方法之前，先了解各导出格式的特性：

格式	特点	适用场景	注意事项
PNG	无损压缩位图，兼容性好	博客、文档、PPT	放大可能失真，建议导出 2x 分辨率
JPG	有损压缩，文件较小	照片类内容、网页展示	不适合包含大量文字和线条的图表
SVG	矢量格式，无限缩放	技术文档、印刷品、网页	文件最小，支持交互和动画
PDF	矢量/位图混合，排版精准	学术论文、正式报告	保真度最高，适合打印

对于技术图表而言，SVG 是首选格式，因为它在任何缩放比例下都保持清晰；PNG 是最通用的格式，几乎所有平台都支持；PDF 则适合需要打印或正式发布的场景。

方法一：在线转换工具（推荐）

对于不常使用命令行的用户，在线工具是最简单直接的选择。

Mermaid2Img

Mermaid2Img 是专为 Mermaid 图表导出设计的免费在线工具，完全在浏览器端运行，无需注册登录。

核心功能：

实时预览：输入 Mermaid 代码即时渲染图表
多格式导出：支持 PNG、JPG、SVG、PDF 四种格式
高清输出：PNG 支持 2x 分辨率，适配 Retina 屏幕
隐私保护：所有处理在本地浏览器完成，代码不上传服务器
错误提示：语法错误实时标红，方便快速修正

使用步骤：

打开 Mermaid2Img 网站
在左侧编辑器粘贴 Mermaid 代码
右侧自动渲染预览图表
选择目标格式，点击下载按钮

graph TD
    A[打开 Mermaid2Img] --> B[粘贴 Mermaid 代码]
    B --> C[实时预览图表]
    C --> D[选择导出格式]
    D --> E[下载高清图片]

Mermaid Live Editor

Mermaid 官方提供的在线编辑器（mermaid.live）也支持导出功能，但相对基础，仅支持 PNG 和 SVG 格式，且无法调整分辨率。

方法二：Mermaid CLI 命令行工具

对于开发者和技术团队，Mermaid CLI 提供了自动化和批量处理能力，特别适合集成到 CI/CD 流程中。

安装

# 全局安装
npm install -g @mermaid-js/mermaid-cli

# 或使用 npx 免安装运行
npx -p @mermaid-js/mermaid-cli mmdc -h

基础导出命令

# 导出为 SVG（默认格式）
mmdc -i diagram.mmd -o output.svg

# 导出为 PNG
mmdc -i diagram.mmd -o output.png

# 导出为 PDF
mmdc -i diagram.mmd -o output.pdf

高级选项

# 指定主题（default / dark / forest / neutral）
mmdc -i input.mmd -o output.svg -t dark

# 设置背景色（支持颜色名或十六进制）
mmdc -i input.mmd -o output.png -t dark -b transparent

# 设置输出宽高
mmdc -i input.mmd -o output.png -w 1920 -H 1080

# 使用自定义 CSS 文件
mmdc -i input.mmd -o output.svg --cssFile custom.css

批量处理

结合 shell 脚本可以实现批量转换：

# 将目录下所有 .mmd 文件转为 PNG
for file in diagrams/*.mmd; do
    mmdc -i "$file" -o "exports/$(basename "$file" .mmd).png"
done

集成到 package.json

{
  "scripts": {
    "build:diagrams": "mmdc -i diagrams/ -o assets/ -t dark"
  }
}

方法三：编程接口导出

如果你需要在应用程序中动态生成图表，可以使用 Mermaid 的编程接口。

Node.js 环境

import { run } from '@mermaid-js/mermaid-cli'

await run(
  'input.mmd',
  'output.svg',
  { theme: 'dark', backgroundColor: '#1e1e1e' }
)

浏览器环境

在浏览器中使用 Mermaid 的 render 方法生成 SVG 字符串，然后转换为图片下载：

import mermaid from 'mermaid'

async function exportDiagram(code, format = 'svg') {
  const { svg } = await mermaid.render('diagram-id', code)
  
  if (format === 'svg') {
    const blob = new Blob([svg], { type: 'image/svg+xml' })
    downloadBlob(blob, 'diagram.svg')
  } else {
    // 将 SVG 转为 Canvas 再导出 PNG
    const img = new Image()
    img.onload = () => {
      const canvas = document.createElement('canvas')
      canvas.width = img.width * 2  // 2x 分辨率
      canvas.height = img.height * 2
      const ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
      canvas.toBlob(blob => downloadBlob(blob, 'diagram.png'))
    }
    img.src = 'data:image/svg+xml;base64,' + btoa(svg)
  }
}

方法四：平台原生支持

部分平台原生支持 Mermaid 渲染，无需手动导出：

平台	支持方式	导出方法
GitHub / GitLab	Markdown 代码块自动渲染	截图保存或使用浏览器扩展
Notion	Code 块选择 Mermaid 语言	直接截图
Obsidian	安装 Mermaid 插件	插件提供导出功能
Typora	原生支持 Mermaid	导出 Markdown 时自动转换
MkDocs	mermaid2 插件	构建时自动生成 SVG

对于这些平台，如果内置导出功能不满足需求，仍然可以借助 Mermaid2Img 等工具获得更高质量的输出。

导出质量优化技巧

1. 选择合适的分辨率

网页展示：1x 分辨率即可
Retina / HiDPI 屏幕：导出 2x 分辨率
印刷用途：300 DPI，建议导出 SVG 或高分辨率 PNG

2. 处理透明背景

# CLI 设置透明背景
mmdc -i input.mmd -o output.png -b transparent

在线工具如 Mermaid2Img 通常也支持透明背景选项，导出 PNG 时勾选即可。

3. 自定义主题与配色

默认主题可能不适合所有场景。通过配置文件自定义主题：

{
  "theme": "base",
  "themeVariables": {
    "primaryColor": "#e1f5fe",
    "primaryTextColor": "#01579b",
    "primaryBorderColor": "#0288d1",
    "lineColor": "#616161",
    "secondaryColor": "#fff3e0",
    "tertiaryColor": "#e8f5e9"
  }
}

使用时指定配置文件：

mmdc -i input.mmd -o output.svg --configFile theme.json

4. 字体嵌入问题

导出 SVG 时，如果使用了特殊字体，可能在其他设备上显示不一致。解决方案：

优先使用系统默认字体（如 sans-serif）
将文字转为路径（CLI 暂不支持，需用 Inkscape 等工具后处理）
导出 PNG 避免字体兼容问题

各方案对比总结

方案	上手难度	自动化程度	格式支持	隐私安全	适用人群
Mermaid2Img	⭐ 简单	手动	PNG/JPG/SVG/PDF	⭐⭐⭐ 极高	所有用户
Mermaid CLI	⭐⭐ 中等	脚本自动化	PNG/SVG/PDF	⭐⭐⭐ 极高	开发者
编程接口	⭐⭐⭐ 复杂	完全自动化	取决于实现	⭐⭐⭐ 极高	工程师
平台原生	⭐ 简单	自动渲染	通常仅显示	⭐⭐ 中等	平台用户

选择建议

偶尔使用、追求便捷：选择 Mermaid2Img 等在线工具，打开即用，无需配置
团队协作、文档自动化：使用 Mermaid CLI 集成到构建流程，保持文档与代码同步更新
产品功能集成：调用编程接口，在应用内提供图表生成和导出能力
快速分享：利用 GitHub、Notion 等平台原生支持，直接嵌入代码块

无论你选择哪种导出方式，核心目标都是让 Mermaid 图表能够在各种场景中清晰、准确地传达信息。Mermaid2Img 作为专门针对导出场景优化的工具，在便捷性、格式支持和输出质量之间取得了最佳平衡，推荐作为日常使用的首选方案。