paint-brush
这就是为什么你不应该将 Graphviz 用于 DAG:你应该使用什么经过@s0l0ist
1,093 讀數
1,093 讀數

这就是为什么你不应该将 Graphviz 用于 DAG:你应该使用什么

经过 Nick Angelou5m2024/01/24
Read on Terminal Reader

太長; 讀書

tl;dr:使用 Vizdom.dev 渲染用 DOT 语言编写的 DAG,并体验高达 30 倍的加速
featured image - 这就是为什么你不应该将 Graphviz 用于 DAG:你应该使用什么
Nick Angelou HackerNoon profile picture
0-item
1-item


剧透:使用Vizdom.dev渲染用 DOT 语言编写的 DAG


作为一名软件开发人员,我偶尔会使用 DAG——其中大部分涉及将它们可视化。在许多情况下,我发现很难快速渲染,并发现自己正在寻找工具。


幸好还有值得信赖的人图形可视化可以渲染用 DOT 语言编写的图形的工具 - 完美!


除了…

  • 它在网络上效果不佳*
  • 我需要安装它
  • 它不在线管理 DOT/GV 文件

注意事项

*好吧,从技术上讲,Graphviz 可以编译为 WebAssembly,并且一些有才华的人成功构建了一些简洁的项目,例如 dreampuf 的编辑, 耐克的编辑网和马贾克的编辑——每一个都有自己的特色。我仍然很难嵌入这些渲染而不将它们导出到 SVG(或其他媒体)。


例如,我想将我的图表存储在概念.so只需粘贴自动呈现图表的链接即可。


我可以用美人鱼JS它可以非常干净地渲染图表并且效果出奇的好——这是它具有如此优势的众多原因之一64k+ 在 GitHub 上启动。我还可以使用 markdown 将图表嵌入到 Notion/GitHub 中,太棒了!


不幸的是,我必须将 DOT 翻译成 Mermaid 需要的 markdown 风格。对于较小的文本表示,我可以使用 ChatGPT 为我转换它们,但它经常出现语法错误,并且图形将拒绝渲染 - 使其作为自动化来源不可靠。


然后有Terrastruct.com这对于管理手工构建的图表来说非常神奇,但就像我的美人鱼困境一样,我无法可靠地将 DOT 转换为 D2。我想如果您要手动构建图表,这是可以接受的一次性成本。总的来说,它是一个很棒的工具。荣誉!

问题

  • 我想渲染以编程方式生成的 DOT 输出 - 似乎没有任何工具可以帮助我实现该目标。


  • 我想嵌入渲染图表的链接。


  • 我想在线存储渲染以进行更新或将其与其他图表进行直观比较。

解决方案

是的——我建造了一个应用程序为此🎉


...它完全是用 Rust 🦀 构建的,非常感谢乐浦


tl;dr — 一个简单的、专门构建的应用程序,用于快速在线渲染 DAG


最小化图形生成中的边交叉,公认的 NP 难题是创建视觉上有吸引力的图形的关键。 Terrastruct 团队发表了一份杰出的博客文章深入研究这个话题。受到 DagreJS 布局算法和富有洞察力的论文“ 绘制有向图的技术1”的显着启发,我开发了 Rust 的一个变体。


该版本对于渲染分层图特别有效,利用了该问题的复杂性。


使用 Graphviz 渲染大型 DAG(500 多个节点/边)往往会有些缓慢。达格雷 + D3 ( d3-graphviz和衍生品)最终速度更快,并提供出色的动画/样式定制。然而,我觉得他们错过了 DOT 语言提供的功能——也就是说,样式属性通常只有在使用 Graphviz 渲染时才会被尊重。


维兹统治将产生与 Dagre 非常相似的结果,但更符合 Graphviz 的 DOT 规范和样式行为。但是,它不具有与 Graphviz 相同的功能,并且不支持的语句/属性将被简单地忽略。


我相信对于以编程方式生成的 DOT 将消耗的属性类型来说,这是一个很好的折衷方案。


维兹多姆特点

  • 🚀 极快的渲染速度
  • 💾 在链接中存储图表
  • 0️⃣ 零依赖,无需安装

渲染速度

嗯,这是一个苹果与橘子的比较。 Graphviz 仍然可以产生出色的可视化效果并支持更多布局引擎,所以我主观地比较维兹统治针对 Graphviz 的 DOT 引擎,将其范围缩小到 DAG,甚至进一步将其范围缩小到 DOT 语言的一系列狭窄功能。


是的,我知道比较 Graphviz 30 多年的经验和工具是很糟糕的,但对于我狭窄的用例来说,它的速度太快了。以下是我的 M1 Macbook Pro 上用于渲染的一些墙时间一个相当大的图表大约 400 个节点:


  • 原生 Graphviz:约 30 秒
  • Chrome (WASM) Graphviz:崩溃*
  • Chrome (Javascript) DagreJS:约 10 秒
  • 铬(WASM)维兹统治~1 秒**


* 它崩溃是因为未设置 emscripten 标志ALLOW_MEMORY_GROWTH=1 ,因此将总内存限制为 16MB。这个问题可以解决,但我还没有找到可以处理相关图表的在线项目。


** 通过在编辑器视图中选择Example 14来呈现示例图。刷新页面将导致您刷新页面并收到 414,因为图表中保留的 URI 太大。我正在研究一种更好的解决方案来存储更大的图表。


示例14的SVG渲染

在链接中存储图表

您会注意到,当您对 DOT 文件进行任何更改时,URL 会立即更新一些查询参数来存储图形和布局选项,从而使您始终可以通过存储链接来引用数据的副本!


有一个问题——大图往往会使 URI 对于 AWS 来说太大(其中维兹统治目前托管)和其他负载均衡器。


我目前正在研究一种处理更大图形的解决方案,但与此同时,我提供了一些持久和存储图形的方法:


  • 复制可嵌入链接,该链接会自动呈现最大化图形的视图。


  • 复制 iframe 片段以嵌入到任何支持渲染它们的应用程序中。


  • 或者直接下载渲染的 SVG。


这是编辑器视图的示例pprof 跟踪 deflate :

转到编辑器视图,然后加载Example 42


差异视图

有时,我发现自己试图比较我生成的两个图表,所以当我这样做时,我添加了一个差异查看器直观地看到两个不同图表之间的变化。


颜色图例:

  • 红色:已删除
  • 橙色:修改
  • 绿色:已添加


这是一些快照:

点击我:将节点ID从“e”更改为“f”


点我:添加“cluster=true”


未来方向

维兹统治仍然是一项正在进行的工作,随着它的不断发展,我意识到完善这个工具的旅程与图形可视化领域本身一样动态。虽然我很自豪什么维兹统治到目前为止,我对它的潜力感到更加兴奋。这就是您(读者和潜在用户)发挥作用的地方。


如果您有任何反馈,请随时给我留言吉特或者不和谐


感谢您的阅读——如果您喜欢这篇文章,请关注


[1]:ER Gansner、E. Koutsofios、SC North 和 K.. -P。 Vo,“一种绘制有向图的技术”,载于 IEEE 软件工程汇刊,第 1 卷。 19、没有。 3,第 214–230 页,1993 年 3 月,doi:10.1109/32.221135。


也发布在这里