title: Flow based programming js html ui
body: <p>I need your great help on how to create a Simple Flow based UI in JS.</p>
  <p>For my simple structure I will have 3 node groups that will connect like so :</p>
  <p>Input -&gt; Process -&gt; output</p>
  <p>For the below example I would like to just start of with a static input value of x=65 that can be connected via a connector to a process of either x+10   or x+10000 and depending on which ever is selected  the out put is shown.</p>
  <p>So its basically a function:</p>
  <pre><code>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 &quot;after processing the value of X is&quot;.X;
  }
  </code></pre>
  <p>The part I need help with is how can I implement a flow based User  interface where I can drag and connect the relevant boxes to create an output..</p>
  <p>I would appreciate any help in building a simple UI to do the below .</p>
  <p><a href="https://i.stack.imgur.com/XEwE5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XEwE5.jpg" alt="Intended example interface" /></a></p>