angular - 逻辑图的构建图编辑器

Question

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

图表应该具有以某种格式保存以供以后编辑的功能。我想将 SVG 用于可扩展的图形，并使用 Angular 作为框架。我心目中的技术是 SVG、d3、Angular5/6 框架。请为此建议一些合适的技术。有没有人知道任何可能为我指明正确方向的例子，或者谁能提供一些见解。

标签： angulard3.jssvgeditordiagram

Answer 1

我想到的第一个解决方案是Node-RED——尽管它的设计目的不仅仅是绘制流程图……它的编辑器是使用 SVG 和 D3 构建的，一旦你“部署”了你的流程，它就会立即开始运行. 因此，您实际上可以使用它来调试您的流程，方法是注入已知的测试值并验证输出。

这是一个示例流程，我花了 5 分钟来创建和测试：

NB Node-RED 是一个单用户 Express (nodejs) 应用程序——因此，如果您必须让各个用户具有不同的流/实例，您将需要为每个用户部署一个实例，无论是在单独的端口还是主机上。