如何生成可被Pandoc正确渲染的Mermaid SVG以完成Markdown转PDF？

一、调整Mermaid配置文件 #

要让mermaid-cli生成纯SVG元素、无HTML依赖的输出，除了禁用htmlLabels，还需补充关键配置。创建或修改mermaid-config.json，写入以下内容：

{
  "theme": "default",
  "htmlLabels": false,
  "securityLevel": "loose",
  "svgBounds": true,
  "fontFamily": "Arial, sans-serif",
  "flowchart": {
    "htmlLabels": false,
    "useMaxWidth": false,
    "curve": "linear"
  },
  "sequence": {
    "htmlLabels": false
  },
  "gantt": {
    "htmlLabels": false
  }
}

• htmlLabels: false：全局禁用HTML标签，确保所有文本用SVG原生<text>元素渲染
• svgBounds: true：强制生成带明确边界的SVG，避免rsvg-convert裁剪内容
• useMaxWidth: false：防止流程图自动收缩导致布局错乱
• 指定系统字体：避免使用rsvg-convert不支持的Web字体

二、用mermaid-cli生成兼容SVG #

1. 单独转换单个Mermaid图 #

如果是独立的Mermaid文件（.mmd），直接执行：

mmdc -i "path/to/your-diagram.mmd" -c "path/to/mermaid-config.json" -o "path/to/output/diagram.svg"

2. 批量提取Markdown中的Mermaid块 #

如果Markdown里包含多个Mermaid代码块，用--extract参数批量生成独立SVG：

mmdc -i "path/to/input.md" -c "path/to/mermaid-config.json" --extract -o "path/to/output/folder/"

执行后，每个Mermaid块会生成input-diagram-1.svg、input-diagram-2.svg这类命名的文件，之后把原Markdown里的Mermaid代码块替换为SVG引用：

![流程图](path/to/output/folder/input-diagram-1.svg)

三、Pandoc转PDF的可靠流程 #

方案1：用rsvg-convert（Pandoc默认） #

直接转换修改后的Markdown，若有渲染问题，给rsvg-convert加参数：

pandoc -s "path/to/modified.md" -o "output.pdf" --pdf-engine=xelatex --svg-command="rsvg-convert --keep-aspect-ratio --no-embed-fonts"

方案2：用Inkscape处理SVG（兼容性最优） #

如果rsvg-convert仍有异常，强制Pandoc用Inkscape把SVG转成PDF片段：

pandoc -s "path/to/modified.md" -o "output.pdf" --pdf-engine=xelatex --svg-command="inkscape --export-type=pdf --export-filename=-"

四、替代方案：直接用mermaid-cli生成PDF #

跳过Pandoc处理SVG的环节，直接用Mermaid的Chromium渲染器生成PDF，兼容性拉满：

mmdc -i "path/to/input.md" -c "path/to/mermaid-config.json" -o "output.pdf"

内容的提问来源于stack exchange，提问作者Foad S. Farimani