企业官网建设流程全解析

D2 图表导出完全指南：一条命令产出 SVG、PNG、PDF 等 6 种格式

【免费下载链接】d2D2 is a modern diagram scripting language that turns text to diagrams.项目地址: https://gitcode.com/GitHub_Trending/d2/d2

D2 是一款现代图表脚本语言，把文本直接转换成图表。写好一个 .d2 文件之后，D2 图表导出可以根据用途输出 6 种结果：D2 SVG 导出（适合网页）、PNG（适合截图分享）、PDF（适合打印文档）、PPTX（适合演示）、GIF（适合动画演示）以及终端 ASCII 文本。本文从第一条导出命令讲起，覆盖格式选择、进阶参数与常见问题处理，帮助你在不同场景下拿到合适的产物。

一条命令导出 SVG

导出的基本形式是"输入文件 + 输出文件"两段参数，D2 根据输出文件的扩展名判断目标格式：

d2 diagram.d2 diagram.svg

如果你只给出输入文件不写第二个参数，D2 会在同目录下生成与输入同名的 .svg。SVG 是默认格式，原因是它属于矢量图形：放大不糊、文本可选可检索，且整个文件就是可编辑的 XML 文本，方便后续微调。本地未安装 d2 命令的话，可参考仓库中的 安装说明。

上面这张由 D2 渲染的架构图展示了嵌套容器、数据库圆柱体与图标混排的效果，导出为 SVG 后在浏览器中任意缩放都不会出现像素模糊。

D2 支持的 6 种输出格式

其中 PNG、PDF、PPTX、GIF 这几种位图格式在内部都会经过一次浏览器渲染，因此首次使用比 SVG 慢一些，这一点后文"常见坑"里有对应说明。

怎么选 D2 导出格式：四个场景各一句建议

• 放进网页或文档站点：选 SVG。D2 默认会把用到的图片和分层内容打包进单个 SVG 文件（即 bundle 行为），直接放进 HTML 就能显示；若要在同一段 HTML 里内嵌多张相同结构的图，可以加--salt参数给元素 ID 加上后缀，避免 ID 冲突。
• 放进打印版报告：选 PDF。一页一张 board，方便装订和分发。
• 发给同事看一眼：选 PNG。位图兼容性最好，任何设备都能直接打开。
• 演示一个逐步展开的流程：选带动画的 SVG 或 GIF，见下一节。

进阶参数：微调边距、缩放与主题

导出命令支持多个可选参数，最常用的几个：

• --pad：调整图表四周留白（像素），默认值见 d2svg 渲染器配置；
• --scale：整体缩放输出，比如 0.5 表示缩到默认尺寸的一半；
• --theme与--dark-theme：分别指定主题 ID 和深色模式主题，注意深色主题只对 SVG 生效；
• --sketch：把手绘风格渲染应用到任意输出格式；
• --bundle：默认开启，控制是否把外部资源内联进 SVG。

主题编号是主题库中的整数 ID，同一套主题定义同时决定浅色与深色两套取色，导出时只需指定编号即可。

用多 board 生成动画 GIF

如果你的 .d2 文件里用steps、layers或scenarios定义了多个 board，可以加--animate-interval把它们串成一个自动翻页的动画，该参数只接受 SVG 或 GIF 两种输出，单位为毫秒。GIF 不写时默认每帧停留 1000 毫秒：

d2 diagram.d2 diagram.gif --animate-interval 800

动画 GIF 适合放进 README 或文档里演示状态变化，例如资金流向、部署步骤这类分阶段演化的内容。

D2 图表导出常见坑及应对

1. 首次导出 PNG/PDF 很慢或失败。这几类格式依赖内置的无头浏览器引擎，第一次运行需要下载浏览器运行时。若环境受限，可先跑一次 SVG 导出确认命令本身没问题，再重试位图格式。

2.--dark-theme被静默忽略。深色主题仅对 SVG 生效，导出其他格式时 D2 会打印警告并放弃该参数。想要深色效果请先产出 SVG，再自行转位图。

3. 输出路径写成了 .ppt。命令会直接报"不支持 ppt，你是不是想用 pptx"的提示，按提示改扩展名即可。

4. 大图导出中断。编译有默认 120 秒的超时上限，遇到节点数量很大的图表时，用--timeout调大该值。

5. 多 board 导出后出现一堆目录。当文件包含 layers、scenarios、steps 时，D2 会按index.svg、layers/、scenarios/、steps/的结构生成目录树，并把图形内指向子 board 的链接改写为相对路径。这是正常行为，浏览器打开入口的 index 文件即可正常跳转。

6. PNG 里多出一块"附录"区域。位图无法交互，D2 会把 tooltip 和链接内容以附录形式追加在图下方；SVG 默认不追加，需要时可用--force-appendix开启。

小结

D2 的导出能力围绕"一个输入、六种产物"展开：日常嵌入网页就用默认的 SVG，归档打印用 PDF，快速分享用 PNG，汇报用 PPTX，流程演示用带 interval 的 GIF 或动画 SVG，终端场景则可以用 ASCII 文本。格式由输出扩展名决定，边距、缩放、主题、动画都通过对应参数在导出命令上直接控制，掌握这些之后，同一份 .d2 源文件就能适配绝大多数交付场景。

【免费下载链接】d2D2 is a modern diagram scripting language that turns text to diagrams.项目地址: https://gitcode.com/GitHub_Trending/d2/d2