ARTICLE DETAIL

资讯详情

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

D2 图表导出教程:3 条命令把文本变成 SVG、PNG 和 PDF

D2 图表导出教程:3 条命令把文本变成 SVG、PNG 和 PDF D2 图表导出教程3 条命令把文本变成 SVG、PNG 和 PDF【免费下载链接】d2D2 is a modern diagram scripting language that turns text to diagrams.项目地址: https://gitcode.com/GitHub_Trending/d2/d2给新同事讲一个服务时你手上往往有张旧架构图——PNG 打不开源文件留在某个已离职的人电脑里。D2 就是干这个的一款把纯文本脚本渲染成图表的语言几行x - y这样的文本一条命令直接得到 SVG、PNG、PDF 成图。这篇带你看清安装、出图全流程以及导出时关键参数怎么选。D2 是什么D2 的定位一句话图就是代码。你用.d2文件描述节点、箭头和样式它负责自动布局并输出图片布局引擎可换默认 dagre内置 elk主题系统开箱即用还带格式化、补全这类语言工具。对新人的实际好处图存在仓库里评审时看的是 diff 文本不再是图又被人拖乱了的二进制文件。更多安装方式各系统的包管理器、Windows、Docker都写在 docs/INSTALL.md常用语法速查可以翻 docs/assets/cheat_sheet.pdf。3 分钟跑通第一张图仓库可以整体拉下来go build出一个d2可执行文件之后所有导出都是同一套命令git clone https://gitcode.com/GitHub_Trending/d2/d2 cd d2 go build -o d2 . echo x - y - z demo.d2 d2 demo.d2 demo.svg d2 demo.d2 demo.png到这里你就有了两张图改后缀就是改格式.pdf出打印版.gif出动画。想边写边看把命令换成d2 --watch demo.d2 demo.svg浏览器会随你保存自动刷新。导出格式和关键参数怎么选输出格式由你给的文件后缀决定选法很直接后缀特点适用场景.svg矢量支持链接点击、hover 提示嵌网页、进仓库.png位图哪都能打开聊天工具、PPT.pdf矢量打印友好归档、正式文档.gif多板动画流程演示常用参数的取舍参数干什么什么时候用--layout换布局引擎dagre 为默认elk 已内置边多、默认排得挤时切 elk 试试--theme/--dark-theme按主题 ID 换配色后者给 SVG 配暗色版文章有深色模式时两者配合用--sketch渲染成手绘风博客插图、社媒分享--animate-interval多个 board 拼成一张动图状态流转演示--watch监听文件、自动重出图画图初稿阶段放到真实场景里场景一把流水线图写进开源仓库的文档。仓库里 docs/examples/flipt/ 就有一个现成例子一份input.d2描述 Build → Test → Release 三段导出后直接得到这样一张图丢进 README 就能用。架构图变了改脚本、重跑一次命令评审看的是文本 diff不是像素。场景二给复杂系统画总览图。docs/examples/twitter/ 的in.d2用一份脚本描述了几十个模块和服务间依赖导出的 PNG 直接可以放进分享 PPT。手动画图工具里挪几十个框要半天这里只是多写几行缩进。d2 in.d2 out.svg d2 in.d2 out.png踩坑速查现象--dark-theme配 PNG 导出时有警告且不生效。原因明暗双主题只对 SVG 起作用靠浏览器切换外观。解法要暗色就导 SVGPNG 场景用--theme直接选一套深色主题。现象加了--animate-interval报错 can only be used when exporting to SVG or GIF。原因多板动画只支持这两种格式。解法输出改成.svg或.gifGIF 不指定间隔时默认每帧 1 秒。现象大图渲染卡一阵后报超时。原因CLI 默认 120 秒超时。解法--timeout 300把上限调大单位是秒。现象PNG 里链接点不动图末尾还多出附录。原因位图不交互D2 把 tooltip 和链接自动挪进附录。解法需要可点击就用 SVGPNG 场景接受附录是既定行为。明天开工就干一件事把文档里那张三年没动过的架构图用十来行.d2重写导一张 SVG 把旧图换掉。以后架构一变改文本、重导一次图永远是新的。【免费下载链接】d2D2 is a modern diagram scripting language that turns text to diagrams.项目地址: https://gitcode.com/GitHub_Trending/d2/d2创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表