企业官网建设流程全解析

D2 图表导出指南：从一行命令到 SVG、PNG、PDF 与 PPTX

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

D2 是一款现代图表脚本语言，你用纯文本描述框、箭头和层级，它帮你排好版并渲染成图。导出是 D2 的核心环节：写完.d2文件后，一条命令就能得到 SVG、PNG、PDF、PPTX、GIF 甚至终端里的 ASCII 图。读完这篇，你可以独立完成安装、首张 SVG 导出，并按不同用途（网页、打印、演示、动画）挑对格式和参数。

先把场景说清楚

假设你要给一份设计文档配图。你不想打开任何图形软件去拖框，只想把架构用几行文本写下来，然后生成一张能贴进文档的图。D2 的导出就是干这件事的：输入是.d2文本，输出是带扩展名的图片文件，格式由你给输出路径指定的扩展名决定，默认生成 SVG。

三步拿到第一张图

先装好 D2，官方推荐安装脚本：

curl -fsSL https://d2lang.com/install.sh | sh -s --

写一个最小的in.d2，三个节点一条链：

x -> y -> z: ok

然后导出：

d2 in.d2 out.svg

打开out.svg，放大看箭头和文字边缘依然清晰——这是矢量格式的固有优势。省略输出参数时，D2 会在同目录生成与输入同名的.svg文件。加上--watch参数则进入监听模式，保存in.d2后浏览器自动刷新，画草图阶段很顺手。

同一张图，四种出口

格式不用换工具，改输出扩展名就行，同一份.d2能一路导到底：

d2 in.d2 out.svg # 网页、文档 d2 in.d2 out.pdf # 打印 d2 in.d2 out.pptx # 演示

贴进网页：SVG 与 PNG

SVG 适合放进 Markdown 或网页，无损缩放。如果你需要位图——比如发到不支持 SVG 的平台——就导 PNG。D2 用无头浏览器把矢量图栅格化成 PNG，所以 PNG、PDF、PPTX、GIF 这四类输出都依赖它。

直接进幻灯片：PPTX

需要放进演示文稿时，直接导 PPTX。它基于内置模板生成，你还能在.d2里用vars.d2-config.pptx覆盖模板里的配色变量，让图里的主题和幻灯片风格保持一致。

动画、边距和几个易错点

多画板（board）可以用--animate-interval打包成动画：多个画板按顺序循环切换，GIF 导出时不指定间隔则默认 1000 毫秒。

几个参数能解决大多数微调需求：

d2 in.d2 out.png --pad 50 --scale 1.5

--pad控制图四周的留白（像素），--scale控制整体尺寸，0.5就是缩小一半。

几个容易踩的点：

• PNG、PDF、PPTX、GIF 都靠无头浏览器渲染，首次报错时先跑d2 init-playwright初始化依赖。
• --dark-theme只作用于 SVG，给深色模式下的查看者换一套主题 ID，别指望它影响 PNG。
• 往 HTML 里嵌 SVG 时加--no-xml-tag去掉 XML 声明；同一页放多张图用--salt给内部 ID 加盐，避免两张图的 ID 撞车。
• 大图解算慢就调大--timeout，默认 120 秒。
• 默认 100 像素的留白被压掉、图顶到边，多半是忘了调--pad。

更多格式与参数的完整清单在 docs/INSTALL.md 和d2 --help里都能查到。

把.d2文件当作图的源头放进版本管理，结构变了改文本、重新导一遍即可。文档里的 SVG、演示里的 PPTX、博客的 GIF，都能从同一份文本长出来，改一处、处处生效。

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