跳到主要内容
返回博客
2026年11月7日星期六

Mermaid 转 SVG：把时序图导出到文档和幻灯片

把 Mermaid 时序图导出为 SVG，在文档和幻灯片中调整尺寸。教程用三个参与者、四条消息的短示例，演示点击编辑、选择格式和下载，附同源 SVG 与 PNG 文件，并说明如何在目标软件检查字体、箭头、文字和图形边界。

Mermaid 转 SVG：把时序图导出到文档和幻灯片

编辑器里清楚的时序图，放大到幻灯片后可能变得模糊。把 Mermaid 导出为 SVG，可以按文档或演示文稿需要调整尺寸。打开 Mermaid 转图片工具，并把源码和导出图一起保存。

在线把 Mermaid 导出为 SVG

  1. 打开工具，点击图形进入源码编辑。
  2. 粘贴 Mermaid 代码，点击编辑区域外部，查看渲染结果。
  3. 打开设置，选择输出，将格式改为 SVG。
  4. 关闭设置，点击下载图片。先在浏览器里打开 SVG，再放进目标文档或幻灯片检查。

编辑器接受 Mermaid 源码。如果源码保存在 Markdown 代码围栏里，只复制围栏内部的内容。

用一张短时序图试导出

示例用四条消息连接写作者、编辑器和导出器。标签刻意保持简短，便于看清箭头。把源码粘贴到工具，就能复现这张图。

```mermaid
sequenceDiagram
    participant Writer
    participant Editor
    participant Exporter
    Writer->>Editor: Paste diagram source
    Editor-->>Writer: Show preview
    Writer->>Exporter: Choose SVG
    Exporter-->>Writer: Download diagram
```

时序图的 PNG 导出结果，展示 Writer、Editor、Exporter 之间的预览与下载消息

下载 SVG · 打开 PNG

两份文件由同一份源码通过工具的导出按钮下载。在 SVG 中核对三个参与者名称、四条消息文字，以及图形下方的品牌标识。要扩展更长的交互，可参考 Mermaid 时序图语法文档。

在目标软件里检查 SVG

定稿前先把文件放进实际使用的软件。检查字体、箭头和标签是否符合预期，图形底部是否完整落在图片边界内。先放大看细节，再按读者实际看到的尺寸检查。

如果发布工具只接受位图，在同一处输出设置里选择 PNG，重新导出，再按预计展示大小检查。长时序图可以缩短标签，或拆成几张较小的图，方便阅读。

修改时从源码重新导出

把 Mermaid 文本和图片一起归档。消息发生变化时，修改源码，再导出新的 SVG。配图时加一句说明，帮助读者理解交互的重点。准备好后，可以在这里创建 SVG 时序图。