求助类似 Node-RED 的画布拖拽组件的工具

[litchinn]

最近写了一个简单的流式规则引擎 大概结构如下

执行规则是通过 input 将所有数据初始化到 context ，然后从各个节点执行相应操作 数据表主要字段如下

但是本人是个后端 javaer ，前端不是很擅长，理想情况是通过类似 Node-RED (或者 StreamSets DataCollector,这个我现在去看发现 github 上的仓库没了不知道为啥) 这种交互方式去创建所需要的各个节点和组合，但是又看不懂 Node-RED 怎么实现的。不知道老哥们有没有什么工具可以实现这个功能，或者其他路径也可以参考。

[kamilic]

1. 给 node-red 做一个 backend ，做完估计你都看懂 Node-RED 了，就能自己自定义 Node-RED 节点类型了 🤣

2. 基于图可视化的库做交互逻辑生成你自己想要的数据
看到有些库能搞，比如阿里的 g6
https://g6.antv.vision/zh/examples/interaction/createEdge#click

查了一下 node-red 实用 d3.js 做的交互逻辑
https://stackoverflow.com/questions/52685386/which-graphical-libraries-are-used-by-node-red-to-draw-drag-drop-nodes-and-als

这些复杂交互都不怎么简单，做完估计你也变得擅长前端了 🤣

[litchinn]

@kamilic 感谢，我去看看这两个

[JuzerQ]

感觉阿里的 antv/x6 更贴合你的场景
https://x6.antv.vision/zh
如果是 react 栈的话连页面的 UI 组件都写好了
https://x6.antv.vision/zh/docs/tutorial/advanced/components
建议不要自己从头搞，就算用现成的拖拽库，但节点组件的实现，整个图表的数据结构，各种事件，交互逻辑，想想都头大

[L1shen]

https://github.com/wbkd/react-flow

这个也很不错

[taowen]

https://reaflow.dev/ 还有这个