D2 图表导出到 SVG、PNG、PDF 的完整指南 【免费下载链接】d2D2 is a modern diagram scripting language that turns text to diagrams.项目地址: https://gitcode.com/GitHub_Trending/d2/d2D2 是一款把文本变成图的现代图表脚本语言写好几行.d2文件一条 D2 导出命令就能拿到 SVG、PNG、PDF 等成品。这篇指南面向刚接触 D2 的开发者不讲安装和画图画法只解决一件事让导出结果真正能交付。第一次 D2 导出把 .d2 变成能贴进 README 的图做完这一步你会得到一张放进 README 无限放大也不糊的 SVG。假设diagram.d2里写着db: (Postgres) web: [Web] web - db跑一下d2 diagram.d2 diagram.svg输出格式由文件扩展名决定——d2看到.svg就按 SVG 渲染没写扩展名时默认也是 SVG。SVG 本质是矢量描述文件缩放不损失细节所以 README、官网、在线文档这类随时可能被放大的场景都优先用它。想看 D2 能画出多复杂的图仓库里有一份现成样例docs/examples/twitter/in.d2 导出的成品是这样的切换导出格式改扩展名PNG 和 PDF 自动跟上做完这一步你会有同一张图的 SVG、PNG、PDF 三个版本分别对应网页、社交分享和正式文档。别急着折腾参数先把格式跑齐d2 diagram.d2 diagram.png d2 diagram.d2 diagram.pdfPNG 是位图导出瞬间就定死尺寸PDF 是矢量文档打印和存档质量最好。两种格式走的是同一套光栅渲染器同一份输入产物尺寸一致方便你对照挑选。仓库还支持pptx和gif用法相同扩展名换成对应格式即可。调整导出外观--pad、--scale、--dark-theme 这几个常用开关做完这一步你拿到的图边距、密度、配色都符合使用场景。四个最常用的开关d2 diagram.d2 out.png --pad 80 --scale 2--pad控制图四周留白像素截图贴文档嫌挤就调大--scale控制输出密度2表示两倍分辨率分享高清 PNG时基本靠它--theme切换整套配色0是默认主题数字主题 ID 可换风格--layout换布局引擎如elk节点多、连线乱时值得一试还有一个容易踩的坑--dark-theme只对 SVG 生效。想给深色网页配图正确姿势是先导出带深色主题的 SVG再自行转成 PNG别指望diagram_dark.png一条命令直接出深色位图 ⚠️交付前检查确认这张图真的能交给别人做完这一步你交出去的图在放大、缩放、换背景后都站得住。交付前花一分钟过三道关放大检验SVG 在浏览器里拉到 200%线条和文字边缘应该依然锐利出现模糊说明源头就不对位图参数PNG/PDF 的清晰度取决于--scale发给别人前先看一眼实际像素小图标糊掉就重导一次边距留白--pad决定图外呼吸感贴进文档和独立成图需要的边距不一样别用同一份参数走天下另外提醒一句d2 watch能在浏览器里实时预览编辑过程导出前先在预览里确认布局比反复改文件重跑要快得多。想动手验证去仓库跑通第一条d2命令再对照 docs/INSTALL.md 把环境装好五分钟就能拿到你的第一张导出图。【免费下载链接】d2D2 is a modern diagram scripting language that turns text to diagrams.项目地址: https://gitcode.com/GitHub_Trending/d2/d2创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考