JSPlumb Sample

This sample parses the XML input and outputs it as a Connected Diagram

by Preetha Srinivasan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.14.3/js/jsplumb.min.js"></script>

    <div id="item_1" class="item">Process A</div>
    <div id="item_2" class="item" style="margin-left:50px;">Process B</div>
    <div id="item_3" class="item" style="margin-left:50px;">Process C</div>

CSS

.item {
    height:80px;
    width: 80px;
    border: 1px solid blue;
    float: left;
    background: blue;
    color:white;
    text-align:center;
    margin-top:50px;
    margin-right: 50px;
}

.down{
    width:100%;
    height:auto;
    float:left;
}
.itemin{
    margin-top:150px;
    margin-bottom:100px;
    border:2px pink solid;
    width:100px;
    height:100px;
    float:left;
}

JavaScript

jsPlumb.ready(function () {

var endpointOptionsLeft = {
    endpoint: [ "Dot", { radius:10 } ],
    style:{fill:'red'},
  	anchor:[ "Right" ], 
	  isSource:true, 
	  isTarget:true,
	  connector : "Straight",
	  connectorStyle: { strokeWidth:5, stroke:'red' },
	  scope:"blueline",
	  dragAllowedWhenFull:false	 
}; 


var endpointOptionsRight = {
    endpoint: [ "Dot", { radius:10 } ],
    style:{fill:'green'},
  	anchor:[ "Left" ], 
	  isSource:true, 
	  isTarget:true,
	  connector : "Straight",
	  connectorStyle: { strokeWidth:5, stroke:'green' },
	  scope:"blueline",
	  dragAllowedWhenFull:false	 
};
    /*First Instance*/
    var firstInstance = jsPlumb.getInstance();
    firstInstance.importDefaults({
        Connector: ["Bezier", {
            curviness: 150
        }],
        Anchors: ["BottomCenter", "TopCenter"]
    });

    /*firstInstance.connect({
        source: "item_1",
        target: "item_2",
        scope: "someScope"
    });*/
    
    jsPlumb.addEndpoint("item_1", { uuid:"abcdefg" }, endpointOptionsLeft );
    jsPlumb.addEndpoint("item_2", { uuid:"hijklmn" }, endpointOptionsRight );
    
    jsPlumb.addEndpoint("item_2", { uuid:"hijklmn" }, endpointOptionsLeft);
    
     jsPlumb.addEndpoint("item_3", { uuid:"hjjjjj" }, endpointOptionsRight);
    
    
   
});