剧透：使用 渲染用 DOT 语言编写的 DAG Vizdom.dev 作为一名软件开发人员，我偶尔会使用 DAG——其中大部分涉及将它们可视化。在许多情况下，我发现很难快速渲染，并发现自己正在寻找工具。 幸好还有值得信赖的人 可以渲染用 DOT 语言编写的图形的工具 - 完美！ 图形可视化 除了… 它在网络上效果不佳* 我需要安装它 它不在线管理 DOT/GV 文件 注意事项 *好吧， ，Graphviz 可以编译为 WebAssembly，并且一些有才华的人成功构建了一些简洁的项目，例如 dreampuf 的 , 耐克的 和马贾克的 ——每一个都有自己的特色。我仍然很难嵌入这些渲染而不将它们导出到 SVG（或其他媒体）。 从技术上讲 编辑 编辑网 编辑 例如，我想将我的图表存储在 只需粘贴自动呈现图表的链接即可。 概念.so 我可以用 它可以非常干净地渲染图表并且效果出奇的好——这是它具有如此优势的众多原因之一 。我还可以使用 markdown 将图表嵌入到 Notion/GitHub 中，太棒了！ 美人鱼JS 64k+ 在 GitHub 上启动 不幸的是，我必须将 DOT 翻译成 Mermaid 需要的 markdown 风格。对于较小的文本表示，我可以使用 ChatGPT 为我转换它们，但它经常出现语法错误，并且图形将拒绝渲染 - 使其作为自动化来源不可靠。 然后有 这对于管理 图表来说非常神奇，但就像我的美人鱼困境一样，我无法可靠地将 DOT 转换为 D2。我想如果您要手动构建图表，这是可以接受的一次性成本。总的来说，它是一个很棒的工具。荣誉！ Terrastruct.com 手工构建的 问题 我想渲染 生成的 DOT 输出 - 似乎没有任何工具可以帮助我实现该目标。 以编程方式 我想嵌入渲染图表的链接。 我想在线存储渲染以进行更新或将其与其他图表进行直观比较。 解决方案 是的——我建造了一个 为此🎉 应用程序  ...它完全是用 Rust 🦀 构建的，非常感谢 乐浦   tl;dr — 一个简单的、专门构建的应用程序，用于快速在线渲染 DAG 最小化图形生成中的边交叉，公认的 NP 难题是创建视觉上有吸引力的图形的关键。 Terrastruct 团队发表了一份杰出的 深入研究这个话题。受到 DagreJS 布局算法和富有洞察力的论文“  1”的显着启发，我开发了 Rust 的一个变体。 博客文章 绘制有向图的技术 该版本对于渲染分层图特别有效，利用了该问题的复杂性。 使用 Graphviz 渲染大型 DAG（500 多个节点/边）往往会有些缓慢。达格雷 + D3 ( 和衍生品）最终速度更快，并提供出色的动画/样式定制。然而，我觉得他们错过了 DOT 语言提供的功能——也就是说，样式属性通常只有在使用 Graphviz 渲染时才会被尊重。   d3-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。 也发布 在这里

This post provides insights into new product. 

This story contains new, firsthand information uncovered by the writer.

Render DAGs with Vizdom

Read My Stories

該音頻是用故事的原始語言製作的！

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

使用这 18 种开发工具来提高你的工作效率 🚀🔥

加密货币增长：创建有效的用户角色

架构师指南：构建 AI/ML 数据湖参考架构

如何将您的工作流程提高 10 倍：17 个必备应用程序

使用这 18 种开发工具来提高你的工作效率 🚀🔥

加密货币增长：创建有效的用户角色

架构师指南：构建 AI/ML 数据湖参考架构

如何将您的工作流程提高 10 倍：17 个必备应用程序

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps