关于 D2 Lang:
D2 与 Mermaid.js、PlantUML、Graphviz 的对比:
3 个赞
还没开发好。
terrastruct:master
← ejulio-ts:sequence-diagrams-lifespan
opened 07:15PM - 29 Nov 22 UTC
Supports #99
- Adds support for activation boxes "over" the objects lifeline…
- "over" because right now we don't have a way to control the SVG drawing order and edges are rendered after shapes. So I'll need to follow-up with another PR to fix that
- Activation boxes can be as nested as you want and as they get more nested, their `width` grows to show some difference from its parent
- horizontal growth seemed better than padding as, otherwise, edges could end up overlapping the parent activation box (see examples below for nested sequential edges)
- The width is constant and only changes when nesting
- The height is based on the first/last edges or the min/max children position
- If there's only one edge, the height is a constant factor then, or the children height + pad
- The children must be considered because of nesting (see examples below)
- The syntax is just `actor.activation_box`
- activation boxes are always rectangles and have no labels (though, we could rethink the labels decision)
- Added a basic test to check the basic properties. Testing the nested properties seemed too much for this and later on we'll have e2e tests, so left it out for now
Examples
```
scorer.t -> itemResponse.t: getItem()
scorer.t <- itemResponse.t: item
scorer.t -> item.t1: getRubric()
scorer.t <- item.t1: rubric
scorer.t -> essayRubric.t: applyTo(essayResp)
itemResponse -> essayRubric.t.c
essayRubric.t.c -> concept.t: match(essayResponse)
scorer <- essayRubric.t: score
scorer.t -> itemOutcome.t1: new
scorer.t -> item.t2: getNormalMinimum()
scorer.t -> item.t3: getNormalMaximum()
scorer.t -> itemOutcome.t2: setScore(score)
scorer.t -> itemOutcome.t3: setFeedback(missingConcepts)
```
![_Users_juliobatista_Projects_terrastruct_d2_sequence svg (1)](https://user-images.githubusercontent.com/102628724/204623026-087c7159-64d0-4261-901c-4ed507aab448.png)
```
scorer -> itemResponse.a
itemResponse.a -> item.a.b
item.a.b -> essayRubric.a.b.c
essayRubric.a.b.c -> concept.a.b.c.d
item.a -> essayRubric.a.b
concept.a.b.c.d -> itemOutcome.a.b.c.d.e
scorer.abc -> item.a
itemOutcome.a.b.c.d -> concept.a.b.c
itemOutcome.a.b.c -> essayRubric.a.b
itemOutcome.a.b -> item.a
itemOutcome.a -> itemResponse
itemOutcome.a -> scorer.abc
```
![_Users_juliobatista_Projects_terrastruct_d2_sequence svg (2)](https://user-images.githubusercontent.com/102628724/204623307-3db42366-dae6-4a9a-b188-4b67d599f173.png)
Edge cases (not sure how to handle properly)
same as above, except for the two `# new edges`
```
scorer -> itemResponse.a
itemResponse.a -> item.a.b
item.a.b -> essayRubric.a.b.c
essayRubric.a.b.c -> concept.a.b.c.d
item.a -> essayRubric.a.b
concept.a.b.c.d -> itemOutcome.a.b.c.d.e
scorer.abc -> item.a
itemOutcome.a.b.c.d -> concept.a.b.c
itemOutcome.a.b.c -> essayRubric.a.b
itemOutcome.a.b -> item.a
# new edge
concept -> itemOutcome
itemOutcome.a -> itemResponse
itemOutcome.a -> scorer.abc
# new edge
itemOutcome.a.b.c.d.e -> scorer
```
![image](https://user-images.githubusercontent.com/102628724/204623911-731c12d0-f953-47a6-9b71-7d7827aecab1.png)
The edges are referencing activation boxes that got hidden because the most nested child expanded over them.
As activation boxes should show a sort lifespan of something, I wonder if this can happen in real life examples. Anyway, it's here for discussion..
PR 里的应该是用的 D2 自家的 TALA 渲染引擎。
语法很简单,也有高级一点的扩展,很适合手工画图。
自动生成还是 Graphviz 和 PlantUML 的工具多。
1 个赞
观望一下,d2 的语法比较符合人类直觉,用起来确实比较简单
Graphviz 写起来比较复杂,并且默认生成的比较丑。
PlantUML 还是可以的,一般时序图用起来挺好的。但是像架构图之类的,它还是不怎么方便。现在还是用 draw.io 手动画。用代码还是很难高效的绘画出好看的架构图。
2 个赞
我之前倒是花钱买了 OmniGraffle,不过是 iPadOS 版的。macOS 上它是对标微软 Visio 的。
OmniGraffle 画图表很爽,而且我还专门买了个能全文检索 OmniGraffle 文件内容的搜索工具(这个功能是我提议加上去的): easySearch 。
自从不用 iPad 发现画图的欲望也没了。
1 个赞
复杂的流程图或架构图还是要手工画, 这种工具看着很牛逼, 其实心智负担非常重, 特别是要重构架构图大范围挪动位置的时候, 基本上和写代码的负担一样重。
而手工画图就是选中一部分拖拽移动即可, 我自己开源项目的架构图都是笔记本触摸板 + Google Docs 画图完成的。
7 个赞
确实,这类画图心智负担确实大,自己画图可以参考优秀的作图弄得漂亮些,动力也会更足。
1 个赞
感谢分享,正需要。这两天还研究了下tikz,不熟悉用起来太慢了。d2 看起来不错,试用ing
book
2022 年12 月 2 日 14:05
12
d2-mode 能不能和org-mode 文件结合,绘制出多个org-mode 文件的链接关系?
你想多了,d2-mode 只是个调用 d2 命令行生成图像的插件。
你要的是类似 universal-ctags 一样的从文件中抽取信息再汇总的功能。
查看文件之间的链接关系,为什么不去用 org-roam 呢?
book
2022 年12 月 2 日 14:32
14
好吧!
如何在emacs中设置d2的路径: /opt/homebrew/bin/d2 ?
book
2022 年12 月 2 日 14:58
16
我运行下面的示例:得到的图如下
root
root -> child A
root -> child B
root -> child C
child A -> grand child AA
child A -> grand child AB
child A -> grand child AC
child A -> grand child AD
child B -> grand child BA
grand child BA -> grand grand child BAA
与官方的图不一样。
D2 有三种渲染引擎,官方示例里的用的是自己的渲染引擎 TALA,需要单独安装。
ginqi7
2022 年12 月 2 日 15:04
18
看效果,估计默认还是用的转换为 Graphviz 渲染的。
book
2022 年12 月 2 日 15:51
19
d2可以将上面的代码画成从上到下,线的连接像官方的图么?