quite cute process

ui/css/flowchartDemo.css

@@ -33,10 +33,17 @@ filter:alpha(opacity=60);
 	border:1px dotted red;
 }
 
-#window1 { top:34em;left:5em;}
-#window2 { top:7em; left:36em;}
-#window3 { top:27em;left:48em; }
-#window4 { top:23em; left:22em;}
+#window1 { top:10em;left:5em;}
+#window2 { top:10em; left:20em;}
+#window3 { top:10em;left:35em; }
+#window4 { top:30em; left:5em;}
+#window5 { top:30em; left:20em;}
+#window6 { top:30em; left:35em;}
+#window7 { top:20em; left:50em;}
+#window8 { top:10em; left:65em;}
+#window9 { top:10em; left:80em;}
+#window10 { top:30em; left:65em;}
+#window11 { top:30em; left:80em;}
 ._jsPlumb_connector { z-index:4; }
 ._jsPlumb_endpoint, .endpointTargetLabel, .endpointSourceLabel{ z-index:21;cursor:pointer; }
 .hl { border:3px solid red; }

ui/index.html

@@ -14,6 +14,13 @@
 			<div class="window" id="window2"><strong>2</strong><br/><br/></div>
 		    <div class="window" id="window3"><strong>3</strong><br/><br/></div>
 		    <div class="window" id="window4"><strong>4</strong><br/><br/></div>		
+        <div class="window" id="window5"><strong>5</strong><br/><br/></div>   
+        <div class="window" id="window6"><strong>6</strong><br/><br/></div>   
+        <div class="window" id="window7"><strong>Moulding</strong><br/><br/></div>   
+        <div class="window" id="window8"><strong>8</strong><br/><br/></div>   
+        <div class="window" id="window9"><strong>Packaging</strong><br/><br/></div>   
+        <div class="window" id="window10"><strong>10</strong><br/><br/></div>   
+        <div class="window" id="window11"><strong>Packaging</strong><br/><br/></div>   
 	    </div>
 		<div id="sidebar">			
             <div id="explanation">

ui/src/flowchartConnectorsDemo.js

@@ -87,10 +87,17 @@
 					}
 				};
 
-			_addEndpoints("window4", ["TopCenter", "BottomCenter"], ["LeftMiddle", "RightMiddle"]);			
-			_addEndpoints("window2", ["LeftMiddle", "BottomCenter"], ["TopCenter", "RightMiddle"]);
-			_addEndpoints("window3", ["RightMiddle", "BottomCenter"], ["LeftMiddle", "TopCenter"]);
-			_addEndpoints("window1", ["LeftMiddle", "RightMiddle"], ["TopCenter", "BottomCenter"]);
+			_addEndpoints("window1", ["RightMiddle"], ["LeftMiddle"]);
+      _addEndpoints("window2", ["RightMiddle"], ["LeftMiddle"]);
+      _addEndpoints("window3", ["RightMiddle"], ["LeftMiddle"]);
+      _addEndpoints("window4", ["RightMiddle"], ["LeftMiddle"]);      
+      _addEndpoints("window5", ["RightMiddle"], ["LeftMiddle"]);      
+      _addEndpoints("window6", ["RightMiddle"], ["LeftMiddle"]);      
+      _addEndpoints("window7", ["RightMiddle"], ["LeftMiddle"]);      
+      _addEndpoints("window8", ["RightMiddle"], ["LeftMiddle"]);      
+      _addEndpoints("window9", ["RightMiddle"], ["LeftMiddle"]);      
+      _addEndpoints("window10", ["RightMiddle"], ["LeftMiddle"]);      
+      _addEndpoints("window11", ["RightMiddle"], ["LeftMiddle"]);      
 						
 			// listen for new connections; initialise them the same way we initialise the connections at startup.
 			jsPlumb.bind("jsPlumbConnection", function(connInfo, originalEvent) { 
@@ -104,12 +111,16 @@
 
             
 			// connect a few up
-			jsPlumb.connect({uuids:["window2BottomCenter", "window3TopCenter"], editable:true});
-			jsPlumb.connect({uuids:["window2LeftMiddle", "window4LeftMiddle"], editable:true});
-			jsPlumb.connect({uuids:["window4TopCenter", "window4RightMiddle"], editable:true});
-			jsPlumb.connect({uuids:["window3RightMiddle", "window2RightMiddle"], editable:true});
-			jsPlumb.connect({uuids:["window4BottomCenter", "window1TopCenter"], editable:true});
-			jsPlumb.connect({uuids:["window3BottomCenter", "window1BottomCenter"], editable:true});
+			jsPlumb.connect({uuids:["window1RightMiddle", "window2LeftMiddle"], editable:true});
+      jsPlumb.connect({uuids:["window2RightMiddle", "window3LeftMiddle"], editable:true});
+      jsPlumb.connect({uuids:["window4RightMiddle", "window5LeftMiddle"], editable:true});
+      jsPlumb.connect({uuids:["window5RightMiddle", "window6LeftMiddle"], editable:true});
+      jsPlumb.connect({uuids:["window3RightMiddle", "window7LeftMiddle"], editable:true});
+      jsPlumb.connect({uuids:["window6RightMiddle", "window7LeftMiddle"], editable:true});
+      //jsPlumb.connect({uuids:["window7RightMiddle", "window8LeftMiddle"], editable:true});
+      //jsPlumb.connect({uuids:["window7RightMiddle", "window10LeftMiddle"], editable:true});
+      jsPlumb.connect({source:"window7", target: "window8"});
+      jsPlumb.connect({source:"window7", target: "window10"});
 			//
             
 			//