等同于纯JavaScript Graphviz [关闭]

139

是否有人知道GraphViz能够生成的基于Java的定向流程图的纯实现？我对漂亮的视觉效果输出不感兴趣，但是可以计算出每个节点的最大深度，以及贝塞尔曲线的布局，这些贝塞尔曲线的布局经过优化，可以最大程度地减少在处理图形（而不是树）时相交边的数量信息。我想在浏览器中都运行此代码；我知道我可以轻松地将Graphviz作为扩展嵌入到我的Node服务器中，甚至popen()可以将其以.dot格式传递到图信息上。

作为参考，这是典型的GraphViz输出。请注意元素是如何堆叠和间隔开的，以允许连接线在节点之间传播，而不会（经常）相交或穿过节点。

在此处输入图片说明

javascript graphviz

— Armentage
source

对于不熟悉GraphViz的我们来说，您是否有这样一个图表的示例？

— 马特·鲍尔

这似乎是javascript

— Daniel Pryden 2011年

3

也许-检查一下。许多评论和响应指向的制图工具根本不像GraphViz那样，或者只能绘制 GraphViz输出，但不能自己做布局。

— Armentage，2011年

84

看看.dot canvas渲染器的纯JavaScript实现：

http://ushiroad.com/jsviz/

该库未记录在案-作者肯定应该对其进行宣传和记录（我将与他联系，建议他至少将其放在github上）。

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

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

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

— 格雷格·萨德茨基
source

1

这个项目看起来很棒，并且可能是我所见过的最好的解决方案，但是肯定需要深入挖掘源代码才能弄清楚如何使用它。该代码似乎很合理，因此可能还不错。

— captncraig 2012年

到目前为止，这与我在原始问题中寻找的最接近。它不仅仅是一个RENDERER，它也知道如何计算有向图。它是在某个地方的后端上运行DOT，还是整个图形生成算法都在我的浏览器上运行？

— Armentage

1

@Armentage，它完全在您的浏览器中运行。Graphviz已通过emscripten编译为JavaScript 。源代码虽然没有得到应有的记录，但现在（在Twitter和电子邮件上困扰了作者之后）现在可以在此处找到。分叉该项目并为其创建易于使用的API将是第一步。

— 格雷格·萨德茨基

5

只是想将Graph Dracula库添加到候选列表。您可以在此处查看演示。它计算图形并显示（使用Raphael）；代码简短明了。

— 格雷格·萨德茨基

Livizjs是一个伟大的工具，但需要注意的是它不支持完整的语言，如“集群”

— SirLenz0rlot

37

经过四处搜寻，我终于找到了答案。

解决方案是有人使用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）
source

这也是我一直在寻找的东西

— RobAu 2013年

6

更新：我做了一个演示站点，展示了如何在viz.js中进行钩子变得有趣又容易！在www.webgraphviz.com上进行查看

— Zachary

提供的github链接已损坏

— Jaime

2

github.com/mdaines/viz.js

— Somu

19

在查看了所有选项之后，我发现基于jsviz和graphviz.js的viz.js（https://github.com/mdaines/viz.js/）实际上具有可在网页上使用的API，以及足够的示例来理解。

— 杰森·塞弗肯（Jason Siefken）
source

1

viz.js很棒而且非常简单，不是说它当前不支持类似html的标签： graphviz.org/doc/info/shapes.html#html

— SirLenz0rlot 2013年

11

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

— 佩德罗泰谢拉
source

这是一个非常好的建议。我当时想尝试自己将代码转换为JS……但是这个llvm技巧真是疯狂！

— Armentage，2011年

到目前为止，我实际上已经进行了几次尝试。emscripten还很年轻，而且文档简短。绝对是一个值得关注的好项目，我可以看到它如何提供很多功能。但是现在，如果您不是编写它的人，那将有些笨拙。

— synthesizerpatel

8

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

这是一个力导向布局的示例，它是graphviz所做的一种形式。

这是有关带有令人敬畏的交互式幻灯片的布局的演讲。

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

— w00t
source

1

github.com/cpettitt/dagre-d3在JavaScript中实现了DOT图。您可以在cpettitt.github.io/project/dagre-d3/latest/demo/…上进行演示。

— Arthur2e5

5

这是使用Emscripten完成的Graphviz到Javascript的交叉编译

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

— 保罗·迪克森
source