
D2 导出指南6 种格式从 .d2 文件到成品的完整命令清单【免费下载链接】d2D2 is a modern diagram scripting language that turns text to diagrams.项目地址: https://gitcode.com/GitHub_Trending/d2/d2D2 是一款现代图表脚本语言用纯文本画出图表而导出环节决定了图能不能真正用起来。这篇文章按嵌网页、贴文档、放幻灯片、做动画四个真实场景讲清 SVG、PNG、PDF、PPTX、GIF 等 6 种 D2 导出格式各自对应的命令以及--pad、--theme、--animate-interval这几个最常用参数的正确用法。1. D2 怎么决定导出格式看输出文件后缀D2 不靠参数指定格式而是直接看输出文件名的后缀没给后缀时默认按 SVG 处理。支持的格式在 d2cli/export.go 中定义一共 6 种格式后缀典型场景SVG.svg嵌网页、Markdown 文档矢量无损PNG.png贴文档、群聊、邮件PDF.pdf正式文档、打印PPTX.pptx演示文稿GIF.gif多层级图表的循环动画TXT.txt终端里的 ASCII 图所以导出动作永远是同一句话只是后缀在变d2 diagram.d2 out.svg2. 网页嵌图用 SVGD2 导出 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 个会反复用到的开关参数作用一句话建议-l, --layout布局引擎dagre / elk 等大图换 elk 试试层次更规整-t, --theme主题 ID先跑d2 themes查可用 ID--pad画布四周留白贴文档时调大--scale输出缩放倍数高清屏用 2--bundle内嵌引用图片SVG 分发默认开着别关主题 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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考