ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

D2 图表导出:SVG、PNG、PDF 实操指南

D2 图表导出:SVG、PNG、PDF 实操指南 D2 图表导出SVG、PNG、PDF 实操指南【免费下载链接】d2D2 is a modern diagram scripting language that turns text to diagrams.项目地址: https://gitcode.com/GitHub_Trending/d2/d2这是一份 D2 图表导出的实操手册。读完你能做三件事用一张对照表在 10 秒内定下输出格式写出三种格式各自对应的导出命令给 PNG 调出透明背景让 PDF 按板拆页。下文所有命令都以diagram.d2为输入示例直接可复制。10 秒定格式一张对照表选对输出格式适用场景导出命令注意点SVG网页嵌入、矢量编辑d2 diagram.d2 diagram.svg唯一支持--dark-theme的格式PNG聊天窗口分享、博客插图d2 diagram.d2 diagram.png静态图交互提示需靠附录补偿PDF正式文档、打印d2 diagram.d2 diagram.pdf多 board 脚本会拆成多页判断标准其实就三条进浏览器或要二次编辑选 SVG直接发给别人看选 PNG进文档或过打印机选 PDF。输出格式由文件扩展名决定连输出路径都不传时默认生成同名的.svg。d2 导出 SVG网页嵌入与文档插图d2 diagram.d2 diagram.svgSVG 是无损的放大多少倍都不糊也是 D2 的默认输出。d2 导出参数里对 SVG 最有用的有四个--pad图四周留白默认 100 像素贴边排版时调小--center把图居中到视图框适合整屏展示--theme/--dark-theme分别指定亮色与暗色主题暗色跟随浏览器模式切换--scale0.5 即缩小一半默认 -1 表示自动适配屏幕把 SVG 直接嵌进 HTML 时再加两个内联参数--no-xml-tag去掉文件头的 XML 声明--salt给元素 ID 加后缀——同一页嵌入多张同构图时能避免 ID 冲突导致页面校验报错。d2 导出 PNG 与透明背景设置d2 diagram.d2 diagram.png --pad 60PNG 走的是无头浏览器渲染默认按 2 倍设备像素出图发到手机上看也不会发虚。--pad控制四周留白上图的 60 就是一个常用值。PNG 本身不交互如果图里写了 tooltip 或链接加--force-appendix会在图尾追加一张说明附录读者不点也能看懂。PNG 透明背景怎么设置没有专门的开关靠 D2 脚本本身在顶层root 作用域写style: { fill: transparent }整张图的底色就没了贴到任何深色页面上都不露白边。这是 d2 png 透明背景最省事的做法改完脚本重新导出即可。d2 导出 PDF文档排版与打印d2 diagram.d2 diagram.pdfd2 pdf 打印场景下有两个行为要提前知道。其一脚本里的每个 board 会各自落成 PDF 的一页写多页架构说明时天然对版不需要手动分页其二root 的fill会作为整页背景色想要纯白打印底就显式设成白色。打印前同样用--pad预留页边距数值给大一点避免文字贴到纸边。大图表渲染耗时偏长默认超时是 120 秒必要时把--timeout调高别误以为 D2 卡死了。d2 批量导出与实用导出参数同一份diagram.d2出多种格式就是连跑三条命令扩展名即格式没有任何隐藏成本。也可以走标准输出d2 diagram.d2 - --stdout-format png结果直接进管道方便和后续处理工具串起来。只导出部分结构时用--target指定 board--target 表示仅根 boardlayers.x.*表示连同 x 层下所有子板一起渲染大脚本里抽一张局部图比另建小文件快。️ 想做出「分步演示」的动图给--animate-interval传一个毫秒数多个 board 会被打包成按序切换的动画仅 SVG 和 GIF 支持导出 GIF 时不传则默认每帧 1000 毫秒。⚠️ 一个容易踩的坑渲染报错时 D2 仍可能写出半成品文件。写脚本判断成败要看 d2 的退出码不能只看输出文件在不在。完整的 d2 导出参数清单见 man 页 ci/release/template/man/d2.1示例脚本可翻 docs/examples/ 对照。打开终端把diagram.d2导出成 SVG 试试。【免费下载链接】d2D2 is a modern diagram scripting language that turns text to diagrams.项目地址: https://gitcode.com/GitHub_Trending/d2/d2创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表