基于流程的编程js html ui

Question

在如何在JS中创建基于简单流的UI方面，我需要您的大力帮助。

对于我的简单结构，我将有3个节点组，它们将像这样进行连接：

输入->处理->输出

对于下面的示例，我想以x = 65的静态输入值开始，该值可以通过连接器连接到x + 10或x + 10000的过程，并取决于选择的是显示了输出。

所以它基本上是一个功能

function input(){
x=65;
return x;
}

function processadd10(x){
x=x+10;
return x;
}

function processadd10000(x){
x=x+10000;
return x;
}

function output(x){
return "after processing the value of X is".X;
}

我需要帮助的部分是如何实现基于流的用户界面，在其中可以拖动并连接释放框以创建输出。

在构建简单的用户界面以完成以下操作方面，我将不胜感激。

Answer 1

您可以使用 jsplumb工具包。

它使您可以快速构建具有可视连接的应用程序。它支持拖放，连接两个节点，平移和缩放功能，迷你地图等

Jsplumb工具箱网站位于link。

浏览他们的演示，您将确信您正在寻找相同的

Answer 2

JSPlumb一张开发者许可证似乎要花费3000美元！这是我发现的一个免费的开放源代码库，仅压缩了10kb：https://github.com/shamansir/rpd

Total.js似乎有a library for flow-based stuff（也是免费的）：