企业官网建设流程全解析

D2 导出指南：6 种格式，从 .d2 文件到成品的完整命令清单

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

D2 是一款现代图表脚本语言，用纯文本画出图表，而导出环节决定了图能不能真正用起来。这篇文章按"嵌网页、贴文档、放幻灯片、做动画"四个真实场景，讲清 SVG、PNG、PDF、PPTX、GIF 等 6 种 D2 导出格式各自对应的命令，以及--pad、--theme、--animate-interval这几个最常用参数的正确用法。

1. D2 怎么决定导出格式：看输出文件后缀

D2 不靠参数指定格式，而是直接看输出文件名的后缀，没给后缀时默认按 SVG 处理。支持的格式在 d2cli/export.go 中定义，一共 6 种：

所以导出动作永远是同一句话，只是后缀在变：

d2 diagram.d2 out.svg

2. 网页嵌图用 SVG：D2 导出 SVG 怎么调

SVG 是 D2 默认格式，也是唯一支持 tooltip、链接跳转等交互的格式。两个参数值得记住：

• --bundle（默认开启）会把图里引用的本地图片内嵌进 SVG，发出去就是单文件，不会裂图
• --dark-theme可以给浏览器暗色模式单独配一套主题，但只对 SVG 生效

d2 diagram.d2 out.svg --dark-theme 9

另一个细节：PNG、PDF 这类不可交互格式，D2 会自动在图后附加 appendix 面板，把 tooltip 和链接以静态文字补上；如果你希望 SVG 也带上这个面板，加--force-appendix即可。

3. 文档插图用 PNG：边距和分辨率怎么控制

把 PNG 塞进 Confluence、飞书文档或邮件时，最常遇到两个问题：图四周太挤，或者分辨率不够放大发虚。对应的参数分别是：

d2 diagram.d2 out.png --pad 80 d2 diagram.d2 out.png --scale 2

--pad控制画布四周的留白像素，默认值偏小，贴到文档里适当调大更透气；--scale直接控制输出分辨率，2 倍输出适合高清屏和打印。仓库里有一张现成的成品可以感受一下 PNG 的效果——它来自 docs/examples/twitter/in.d2，一个 Twitter 内部服务架构图：

4. 放幻灯片用 PDF 和 PPTX：一条命令的事

PDF 用于正式文档和打印，PPTX 则可以直接拖进幻灯片继续编辑：

d2 diagram.d2 out.pdf d2 diagram.d2 out.pptx

这里有个环境层面的注意点：从 d2cli/export.go 可以看到，PNG、PDF、PPTX、GIF 这四种格式都要经过 PNG 渲染器栅格化，本地需要装好配套的渲染环境；而 SVG、TXT 是纯本地生成，随时可用。如果 PPTX 里想换主题色，参考 e2etests-cli/testdata/TestCLI_E2E/ 下的 pptx-theme-overrides 用例，能看到完整的参数组合写法。

5. 多层级动画：D2 导出 GIF 的正确姿势

D2 的 layers（图层）和 scenarios（场景）天然适合做动画，而--animate-interval就是干这个的：把多层图打包成一个文件，按间隔毫秒数逐层切换。

d2 diagram.d2 out.gif --animate-interval 1500

三条规则要清楚：

• 该参数只对 SVG 和 GIF 生效，传其他格式会直接报错，不是静默忽略
• 导出 GIF 时不写该参数，默认 1000ms
• 导出的就是下面这种逐层展开的循环动图：

6. D2 导出常用参数速查：5 个会反复用到的开关

主题 ID 对应的色板长这样，同一套 ID 在所有格式里通用：

下一步：拿你手头任意一个.d2文件，按第 1 节的套路把 SVG 和 PNG 各导出一份，放进你的文档对比观感，再决定主力格式。写复杂图之前，可以先翻一翻 docs/examples/ 里现成的.d2源文件当模板。

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