逻辑图的构建图编辑器

时间:2018-08-15 13:40:17

标签: angular d3.js svg editor diagram

我需要构建一个基于Web的图编辑器(如https://www.draw.io/),用户可以在其中放置各种逻辑门(AND,OR,XOR等)并建立它们之间的相互关系。它必须具有交互式点击,选择和连接,拖放等功能。

图应具有以某种格式保存以供以后编辑的功能。我想将SVG用于可伸缩图形,并将Angular作为框架。我想到的技术是SVG,d3,Angular5 / 6框架。请提出一些适合的技术。 是否有人知道任何可能指向我正确方向的示例,或者谁可以提供一些见解?

2 个答案:

答案 0 :(得分:-1)

我想到的第一个解决方案是Node-RED -尽管它旨在做 WAY 而不只是绘制流程图...它的编辑器是使用SVG和D3构建的,并且一旦“部署”了流程,它就会立即开始运行。因此,您可以可以通过注入已知的测试值并验证输出来实际使用它来调试流程。

下面是一个示例流程,我花了5分钟全部时间来创建和测试:

And/Or logic gate flow

N.B。 Node-RED是一个单用户Express(nodejs)应用程序-因此,如果必须让具有不同流/实例的单个用户,则需要为每个用户在单独的端口或主机上部署一个实例。 < / p>

答案 1 :(得分:-3)

我有非常相似的要求。我免费找到了D3.js,vis.js。 http://www.draw2d.org/非常便宜。有几种不免费的产品:gojs.net或jointjs。