纯JavaScript的Graphviz等效替代方案

Question

有没有人知道一个纯JavaScript实现的方向流程图，可以像GraphViz一样生成呢？我并不关心美观的视觉输出，但是需要计算出每个节点的最大深度，以及优化贝塞尔线布局以最小化当您处理信息图而不是树时相交边数的数量。 我希望能够在浏览器中运行此代码；我知道我可以将Graphviz轻松地嵌入我的Node服务器作为扩展，甚至可以使用popen()并以.dot格式流式传输图形信息。

以下是典型的GraphViz输出，注意元素如何堆叠和分开，以允许连接线在节点之间移动，而不会经常相交或穿过节点。

- Armentage

---

你有这样一个图表的例子吗？对于那些不熟悉GraphViz的人来说。 - Matt Ball

这似乎是 JavaScript 中的图形可视化代码？ 的重复。 - Daniel Pryden

也许——正在查看。有很多评论和回复指向的图表工具与GraphViz完全不同，或者只能够绘制GraphViz的输出，但不能自己进行布局。 - Armentage

Answer 1

看看这个纯JavaScript实现的.dot画布渲染器：

http://ushiroad.com/jsviz/

这个库没有文档 -- 作者肯定应该更广泛地公开和记录它（我会联系他建议他至少将其放在github上）。

更新：代码已推送到github： https://github.com/gyuque/livizjs

更新（2013年2月14日）：出现了另一个竞争者！任何对此感兴趣的人都应该看看Viz.js的示例页面和github仓库。

更新（2020年7月16日）：（七年后）http://webgraphviz.com/也很棒！:-)

- Greg Sadetsky

---

这个项目看起来很棒，可能是我见过的最好的解决方案，但一定需要深入源代码才能弄清如何使用它。不过代码似乎相当合理，所以也许并不那么困难。 - captncraig

@Armentage，它完全在您的浏览器中运行。由于emscripten的编译，Graphviz已经转换为JavaScript。源代码虽然没有像它应该有的那样记录，但现在幸运的是（在通过Twitter和电子邮件催促作者之后）;-)可以在这里找到。分叉该项目并为其创建易于使用的API将是第一步...！ - Greg Sadetsky

希望将 Graph Dracula 库添加到候选列表中。你可以在这里查看演示。它计算图形并显示它（使用Raphael）；代码简短干净。 - Greg Sadetsky

Livizjs是一个很棒的工具，但请注意它不支持完整的语言，例如“clusters”。 - Len

啊哈，我喜欢这个7年后的更新:D - Cokoyan

Answer 2

经过漫长的搜索，我终于找到了答案。

解决方法是使用llvm + emscripten将Graphviz交叉编译成Javascript。以下是链接：

http://viz-js.com/

源代码可以在此处找到： https://github.com/mdaines/viz.js

要快速创建网页，请使用以下内容：

var graphviz_text = ...;
document.body.innerHTML += Viz(graphviz_text, "svg");

- Zachary Vorhies

---

这正是我也在寻找的。 - Rob Audenaerde

更新：我制作了一个演示站点，展示如何轻松有趣地使用viz.js hook！请访问www.webgraphviz.com查看。 - Zachary Vorhies

提供的 Github 链接已经失效。 - Jaime

https://github.com/mdaines/viz.js - Somu

Answer 3

在看过所有选项后，我发现基于jsviz和graphviz.js的viz.js (https://github.com/mdaines/viz.js/) 实际上具有可从网页使用的API，并且提供足够的示例以便理解。

- Jason Siefken

---

viz.js非常棒且非常容易使用，但目前不支持类似HTML的标签： http://www.graphviz.org/doc/info/shapes.html#html - Len

Answer 4

可以尝试将Graphviz转换为JavaScript，就像“PDF阅读器”示例所做的那样： https://github.com/kripken/emscripten

- pedroteixeira

---

这是一个非常棒的建议。我原本想着自己尝试将代码翻译成JS......但这个llvm技巧真是美丽的疯狂！ - Armentage

我已经尝试了几次.. emscripten仍然很年轻，文档也很简略。毫无疑问，这是一个非常值得关注的项目，我可以看到它能提供很多强大的功能。但现在，如果你不是编写它的人，它有些难以使用。 - synthesizerpatel

Answer 5

这并不是一个现成的Graphviz替代品，但d3.js是一个可以根据给定数据执行各种布局的库，是实现Graphviz的绝佳平台。

这里有力导向布局的示例，它是Graphviz所做的一种形式。

这里有关于布局的演讲，带有非常棒的交互式幻灯片。

为了了解该项目，教程非常好。

- w00t

---

https://github.com/cpettitt/dagre-d3 在 JavaScript 中实现了 DOT 图表。您可以在 http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html 上尝试演示。 - Mingye Wang

Answer 6

这是使用 Emscripten 进行的 Graphviz 到 Javascript 的交叉编译：

https://github.com/bpartridge/graphviz.js

。

- Paul Dixon