剧透:使用Vizdom.dev渲染用 DOT 语言编写的 DAG
作为一名软件开发人员,我偶尔会使用 DAG——其中大部分涉及将它们可视化。在许多情况下,我发现很难快速渲染,并发现自己正在寻找工具。
幸好还有值得信赖的人
除了…
*好吧,从技术上讲,Graphviz 可以编译为 WebAssembly,并且一些有才华的人成功构建了一些简洁的项目,例如 dreampuf 的
例如,我想将我的图表存储在
我可以用
不幸的是,我必须将 DOT 翻译成 Mermaid 需要的 markdown 风格。对于较小的文本表示,我可以使用 ChatGPT 为我转换它们,但它经常出现语法错误,并且图形将拒绝渲染 - 使其作为自动化来源不可靠。
然后有
是的——我建造了一个
...它完全是用 Rust 🦀 构建的,非常感谢
tl;dr — 一个简单的、专门构建的应用程序,用于快速在线渲染 DAG
最小化图形生成中的边交叉,公认的 NP 难题是创建视觉上有吸引力的图形的关键。 Terrastruct 团队发表了一份杰出的
该版本对于渲染分层图特别有效,利用了该问题的复杂性。
使用 Graphviz 渲染大型 DAG(500 多个节点/边)往往会有些缓慢。达格雷 + D3 (
我相信对于以编程方式生成的 DOT 将消耗的属性类型来说,这是一个很好的折衷方案。
嗯,这是一个苹果与橘子的比较。 Graphviz 仍然可以产生出色的可视化效果并支持更多
是的,我知道比较 Graphviz 30 多年的经验和工具是很糟糕的,但对于我狭窄的用例来说,它的速度太快了。以下是我的 M1 Macbook Pro 上用于渲染的一些墙时间
* 它崩溃是因为未设置 emscripten 标志ALLOW_MEMORY_GROWTH=1
,因此将总内存限制为 16MB。这个问题可以解决,但我还没有找到可以处理相关图表的在线项目。
** 通过在编辑器视图中选择Example 14
来呈现示例图。刷新页面将导致您刷新页面并收到 414,因为图表中保留的 URI 太大。我正在研究一种更好的解决方案来存储更大的图表。
您会注意到,当您对 DOT 文件进行任何更改时,URL 会立即更新一些查询参数来存储图形和布局选项,从而使您始终可以通过存储链接来引用数据的副本!
有一个问题——大图往往会使 URI 对于 AWS 来说太大(其中
我目前正在研究一种处理更大图形的解决方案,但与此同时,我提供了一些持久和存储图形的方法:
这是编辑器视图的示例
转到编辑器视图,然后加载Example 42
有时,我发现自己试图比较我生成的两个图表,所以当我这样做时,我添加了一个
颜色图例:
这是一些快照:
感谢您的阅读——如果您喜欢这篇文章,请关注!
[1]:ER Gansner、E. Koutsofios、SC North 和 K.. -P。 Vo,“一种绘制有向图的技术”,载于 IEEE 软件工程汇刊,第 1 卷。 19、没有。 3,第 214–230 页,1993 年 3 月,doi:10.1109/32.221135。
也发布在这里