Mermaid 导出 PDF｜矢量图，清晰不模糊，免费

源码 · .md 可拖入 .md 文件或图片

校样 A4 · 分页以下载的 PDF 为准实时

Mermaid 导出 PDF

Mermaid 用几行文字就能画出流程图、时序图、甘特图等。难的是把这些图放进 PDF：不少在线 Markdown 转换工具根本不渲染 Mermaid，只会把源码印出来；有的把整页转成一张大图片，导出的图一放大就模糊；编辑器自带的导出可能会截掉宽图，或者依赖你电脑上安装的字体。

在这里，每个 ```mermaid 代码块都会在你的浏览器里渲染成 SVG，以原生矢量图形嵌入 PDF。放大到任意倍数都清晰，图中的文字可以选中、复制和搜索，classDef 或 style 设置的颜色会按你写的样子保留。

如何把 Mermaid 图导出为 PDF

加入你的图 粘贴 Markdown，或写一个语言标记为 mermaid 的围栏代码块。

检查预览 每张图会随着输入在预览中渲染，语法错误会在原处显示。

下载 PDF 点「下载 PDF」，图会以矢量图形和文档其余内容一起嵌入。

图以矢量路径和文字嵌入，而不是像素，所以任何尺寸打印都清晰，文件也小。想要高清的 Mermaid 图，PDF 里的矢量图本身就是答案。在 PDF 阅读器里搜索能找到图中的文字，也可以直接从流程图里复制一个节点的文字。

放得下的图保持原始大小，较宽的图会缩小到正文宽度，而不是超出页边距；比一页还高的图会缩小到一页之内。节点文字以 SVG 文本绘制，而不是嵌入的 HTML；有些导出方式在节点里显示空白方框，原因正在于此。

流程图、时序图、类图、状态图、实体关系图、甘特图、饼图、思维导图、时间线以及 Mermaid 支持的其他类型，都由 Mermaid 本身渲染，语法和你在 GitHub、GitLab、Obsidian、Notion 里用的完全一样。

常见问题

为什么 PDF 里的 Mermaid 图显示成了代码？

你用的转换工具不渲染 Mermaid，把代码块当成了普通代码。在这里，任何标记为 mermaid 的围栏代码块都会渲染成图。如果语法有误，预览和 PDF 里会显示一个错误框，写明 Mermaid 的报错信息、行号和出错的那一行，文档其余部分照常渲染。

Mermaid 导出的图很模糊怎么办？

模糊是因为图被导出成了位图（PNG 之类的图片），放大后像素就显现出来。这里导出的 PDF 里，图是矢量图，不是位图，放大多少倍都清晰，文字也是可以选中和搜索的真文字。

图太宽，导出后超出显示范围怎么办？

较宽的图会自动缩小到正文宽度，不会超出页边距。如果图非常宽，缩小后字会变小，可以考虑把 flowchart LR 改成 flowchart TD，让它纵向排列。

能只导出一张图，不要其他内容吗？

能：编辑器里只放一个 ```mermaid 代码块，然后下载。PDF 里就只有这张图，保持原始大小，超出页面时才缩小。如果想在别处用这张图，把鼠标移到预览里的图上，就可以复制 SVG，或下载 SVG、PNG。

自定义的颜色和样式会保留吗？

会。用 classDef、class 或 style 设置的填充色、描边颜色和线宽都会保留在 PDF 里。

图会被上传到服务器渲染吗？

不会。Mermaid 在你的浏览器里运行，PDF 引擎也是。页面不允许把你的文档发送到任何地方。

使用场景与教程

Mermaid 图导出 PDF：在浏览器里完成排版。