剧透：使用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 太大。我正在研究一种更好的解决方案来存储更大的图表。

在链接中存储图表

您会注意到，当您对 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。

也发布在这里