ARTICLE DETAIL

资讯详情

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

D2 v0.2.0 更新全解析:布局紧凑化、double-border、多文件格式化与编译器大重构

D2 v0.2.0 更新全解析:布局紧凑化、double-border、多文件格式化与编译器大重构 D2 v0.2.0 更新全解析布局紧凑化、double-border、多文件格式化与编译器大重构【免费下载链接】d2D2 is a modern diagram scripting language that turns text to diagrams.项目地址: https://gitcode.com/GitHub_Trending/d2/d2D2 是一个把文本描述直接渲染为图表的现代脚本语言。v0.2.0 是 D2 早期演进中一个承上启下的版本它大幅压缩了图形的冗余空白、重排了各形状的标签与图标布局并实现了double-border关键字、Docker 渲染 PNG、d2 fmt多文件格式化等一批直接改善日常使用体验的能力同时还为后续多画板multi-board功能完成了编译器重写。本文基于 ci/release/changelogs/v0.2.0.md 展开并结合当前仓库源码d2compiler/compile.go、d2cli/fmt.go、ci/release/docker/Dockerfile等逐项拆解这些变化的用法与底层实现帮助你理解 v0.2.0 的取舍并能在当前代码中准确使用对应的语法与命令。一、版本主题让大图更紧凑、更易读v0.2.0 的开篇就是一次可视化对比同一份 D2 图在 0.1 与 0.2 两个版本下的渲染效果右边明显更紧凑。这个主题贯穿了整个版本的改进项削减了形状默认内边距default padding大量多余的空白被移除逐个形状梳理了 label 与 icon 的位置、padding 以及不同尺寸下的宽高比aspect ratio修复了图标与标签互相碰撞的问题例如 AWS 架构图场景下图标不再与标签重叠。一句话总结v0.2.0 让更大的图也保持可读。对普通用户最直观的收益是——同样的信息量生成的 SVG 更紧凑不需要为了看清内容而手动缩放或裁剪画布。二、新特性double-border 双边框v0.2.0 落地了double-border关键字用来给形状绘制双边框效果。它在语言层面是一个保留关键字可以在 d2ast/keywords.go 中看到其注册double-border: {},从编译器的实现看double-border属于style 下的样式属性编译时会写入形状的 Style 结构。见 d2compiler/compile.gocase double-border: styles.DoubleBorder d2graph.Scalar{MapKey: f.LastPrimaryKey()}在目标数据模型d2target中对应字段为DoubleBorder bool json:double-border见 d2target/d2target.go使用方式正确的写法是把double-border放在style下面例如server: my-service { style { double-border: true } }需要特别注意 v0.2.0 同时收紧的语法规则见下文破坏性变更double-border属于只能在style下使用的样式关键字obj.double-border这种顶层写法自本版本起是非法的必须写成obj.style.double-border。另外double-border并非对任何形状都生效。从编译器校验逻辑d2compiler/compile.go可以看到它的适用范围限制if obj.Style.DoubleBorder ! nil { ... c.errorf(obj.Style.DoubleBorder.MapKey, key double-border can only be applied to squares, rectangles, circles, ovals) }也就是说double-border目前只能作用于square、rectangle、circle、oval这四类形状对其它形状使用会直接报编译错误。三、新特性Docker 镜像支持渲染 PNG此前 D2 的 Docker 镜像主要用于把.d2文本渲染成 SVGv0.2.0 让镜像可以直接输出 PNG对应 issue #594把 Dockerfile 变成了一个更完整的文本转图工作台。伴随这一能力有一个小的破坏性变更Dockerfile 的默认工作目录从/root/src改成了/home/debian/src。这是为了配合fixuid做 UID 重映射——容器默认以非 root 用户debian运行挂载进来的源码目录可以按宿主机用户映射权限避免生成文件归属混乱。当前仓库的 Dockerfile 仍保留这一约定USER debian:debian WORKDIR /home/debian/src EXPOSE 8080见 ci/release/docker/Dockerfile因此在 v0.2.0 及之后版本中如果你习惯把工作目录挂到/root/src需要改成挂到/home/debian/src例如docker run --rm -v $PWD:/home/debian/src d2lang/d2 d2 -f png input.d2 -o output.png说明以上命令中的镜像名d2lang/d2仅作示意实际请以你本机构建的镜像标签或官方发布说明为准重点在于工作目录已经变更为/home/debian/src。四、新特性d2 fmt 支持一次格式化多个文件v0.2.0 之前d2 fmt一次只能处理一个输入本版本开始支持传入多个文件issue #718。这一点在当前源码中得到了完整保留见 d2cli/fmt.gofunc fmtCmd(ctx context.Context, ms *xmain.State, check bool) (err error) { ... for _, inputPath : range ms.Opts.Args { if inputPath ! - { inputPath ms.AbsPath(inputPath) d, err : os.Stat(inputPath) if err nil d.IsDir() { inputPath filepath.Join(inputPath, index.d2) } } input, err : ms.ReadPath(inputPath) ... output : []byte(d2format.Format(m)) if !bytes.Equal(output, input) { if check { unformattedCount 1 log.Warn(ctx, inputPath) } else { if err : ms.WritePath(inputPath, output); err ! nil { return err } } } } ... }使用示例# 一次格式化多个文件 d2 fmt a.d2 b.d2 c.d2 # 目录会被当作 index.d2 处理 d2 fmt ./some-dir # 检查模式只报告未格式化的文件不写入 d2 fmt --check a.d2 b.d2 # 标准输入也仍然可用 cat input.d2 | d2 fmt -几个从源码中可以确认的细节必须至少传一个文件没有任何参数时fmtCmd直接返回错误 fmt must be passed at least one file to be formattedd2cli/fmt.go目录参数如果传入的路径是一个目录会自动拼接该目录下的index.d2作为待格式化文件d2cli/fmt.gocheck 模式--check只统计并警告未格式化的文件最后以退出码 1 返回found N unformatted file(s). Run d2 fmt to fix.d2cli/fmt.go非常适合接入 CI 检查格式。五、新特性sql_table 与 class 形状支持 font-sizev0.2.0 之前font-size只对普通形状生效本版本将其扩展到了sql_table和class两类结构化形状issue #769。编译器中font-size依然是统一进入 Style 的FontSize字段case font-size: styles.FontSize d2graph.Scalar{MapKey: f.LastPrimaryKey()}见 d2compiler/compile.go在编译测试用例中也有对应的验证d2compiler/compile_test.go例如sql_table users { id: int } class Person { name: string } users.style.font-size: 30 Person.style.font-size: 30测试断言g.Objects[0].Style.FontSize.Value 30说明font-size已正确作用到sql_table对象上。配套改进还有sql_table的表头与列左对齐issue #769让数据库表形状的文字排版更整齐。六、新特性预告layers / scenarios / steps 多层抽象关键字v0.2.0 的编译器重写引入了一个重要的语法预留你可以使用保留关键字layers、scenarios、steps来定义多层抽象的图表官方在 changelog 中标注为Coming soon。这些关键字已经在语法层注册见 d2ast/d2ast.go 与 d2ast/keywords.gocase layers, scenarios, steps: ... layers: {}, scenarios: {}, steps: {},也就是说从 v0.2.0 起这三个词成为 D2 语言中的保留字但多画板multi-board能力要到后续版本才正式开放。在当时的语境下官方说明是编译器重写已经为它铺好了路请等待文档与正式发布。作为 v0.2.0 的读者可以把它理解为 D2 走向一张文件表达多种视图的重要信号——这一架构性变化正是本版本编译器大重构的直接产物。七、体验改进布局、标签、图标与序列图7.1 形状与容器布局更紧凑削减形状默认 padding减少多余空白PR #702为带 label 的形状引入形状专属内部边界框shape-specific inner bounding boxes确保标签能放进形状内部而不溢出PR #702package 形状在高度较矮时尺寸更合理PR #702person 形状不再被拉伸得过于变形PR #702oval 形状不会被压得过扁PR #807带图标的形状为标签预留了足够的 paddingPR #702。7.2 容器标签与图标位置调整dagre 布局下容器标签从形状内部移到外部大量此前被遮挡的容器标签现在清晰可见PR #788容器图标从居中改为左上角放置避免与子节点发生碰撞PR #806。这两个变化对大容器里塞了很多子节点的架构图尤其重要标签和图标不再抢占子节点空间。7.3 代码块字体样式代码片段code shape现在会依据高亮器的判定使用粗体bold与斜体italic字体样式issue #710、#741让代码块内的语义重点如关键字、注释能通过字重区分。7.4 序列图全面压缩序列图在垂直与水平两个方向都渲染得更紧凑PR #796序列图的分组标签edge group labels更清晰PR #782。7.5 SVG 附录appendix新增--force-appendix标志当 SVG 输出中包含 tooltips提示框或 links链接时强制在 SVG 中追加一个附录区块PR #761。背景是PNG 是静态图片无法交互因此其 tooltip/link 信息会以附录形式输出而 SVG 本身可交互默认不输出附录--force-appendix让 SVG 也可以携带同样的附录内容。当前 CLI 中仍保留该标志见 d2cli/main.goforceAppendixFlag, err : ms.Opts.Bool(D2_FORCE_APPENDIX, force-appendix, , false, an appendix for tooltips and links is added to PNG exports since they are not interactive. --force-appendix adds an appendix to SVG exports as well)7.6 d2 themes 子命令新增d2 themes子命令用于列出所有可用主题PR #760。在 d2cli/main.go 中themes被分发到themesCmd主题本身集中在 d2themes/d2themescatalog 目录下CLI 侧通过d2themescatalog.CLIString()输出可用主题列表d2cli/main.go。# 列出全部可用主题 d2 themes八、Bugfixes序列图、尺寸、SVG 与边框圆角v0.2.0 修复了一批直接影响渲染正确性的问题序列图分组以自循环self loop结束时不再重叠PR #728actor 形状的缩放正确PR #702note备注的排序偶发错误已修复PR #796尺寸与内边距只设置了 width 或 height 其中一个的无标签正方形/圆形尺寸计算正确PR #702图片可以设置小于 128×128 的尺寸PR #702SVG 输出tooltip 中含符号时不再产生非法 SVGPR #798border radius边框圆角不再与 Firefox 不兼容PR #799class 形状没有任何行rows时高度计算正确PR #756。其中图片尺寸可以小于 128×128意味着此前隐含的 128px 最小尺寸限制被解除小图标场景如 favicon 类资源也能按真实尺寸渲染。九、破坏性变更style 关键字的使用范围被强制v0.2.0 最重要的兼容性变化是样式关键字的使用位置被强制校验。只能在style下使用的关键字如double-border、shadow、bold、italic等不能再直接作为对象属性写在顶层例如obj.double-border、obj.shape反过来的写法现在都是非法的。反过来非样式关键字如shape也不能塞进style里。正确的用法自始至终是# 正确shape 是对象属性double-border 是 style 属性 server: my-service { shape: rectangle style { double-border: true } }从编译器源码可以看到这一强制校验的实现d2compiler/compile.gokeyword : strings.ToLower(f.Name.ScalarString()) _, isStyleReserved : d2ast.StyleKeywords[keyword] if isStyleReserved f.Name.IsUnquoted() { c.errorf(f.LastRef().AST(), %v must be style.%v, f.Name.ScalarString(), f.Name.ScalarString()) return }即凡属于StyleKeywords集合的关键字若以未加引号的形式出现在对象顶层编译器会直接报错xxx must be style.xxx从语法层面杜绝了写错了位置但一直没被发现的情况。在测试数据中也能看到对应的正反用例例如 testdata/d2compiler/TestCompile2/vars/basic/double-border.exp.json 与 testdata/d2compiler/TestCompile2/vars/basic/invalid-double-border.exp.json 分别对应合法与非法写法。注意若使用带引号的字符串作为 key如double-border编译器不会把它当作保留关键字处理因此不受此限制——但这属于逃生通道正常写作仍应遵循shape 在顶层、样式进 style的规范。十、编译器重写为多画板铺路changelog 明确提到 v0.2.0 经历了一次major compiler rewrite主要编译器重写。它修复了大量小的编译器 bug但最重要的意义在于实现了多画板multi-board图表的数据结构基础。从当前仓库的结构看这次重写的成果沉淀在 d2compiler 与 d2ir 这两个包中解析d2parser产出的语法树先被转换为中间表示d2ir再由d2compiler编译为图对象d2graph。这种解析 → IR → 图的管线让layers/scenarios/steps这类多视图关键字有了落点——一张源文件可以同时表达分层、场景与步骤等不同抽象级别而不必为每种视图维护一份重复文本。对普通用户而言v0.2.0 能直接感知到的是编译 bug 变少、报错信息更明确例如上文must be style.xxx而layers/scenarios/steps的正式用法需要等待后续版本补齐文档与 UI 支持。结语D2 v0.2.0 是一个内功与外功并进的版本对外double-border、Docker PNG 渲染、d2 fmt多文件、sql_table/class的font-size让日常作图更顺手对内编译器重写与layers/scenarios/steps关键字预留为后来的多画板能力奠定了架构基础。如果你正在把旧版本项目升级到 v0.2.0请重点检查两点一是所有样式关键字是否都已挪进style块二是 Docker 挂载目录是否已改为/home/debian/src。这两处是本次升级中最容易踩到的兼容性坑。 /输出文章【免费下载链接】d2D2 is a modern diagram scripting language that turns text to diagrams.项目地址: https://gitcode.com/GitHub_Trending/d2/d2创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表