JSPlumb Sample

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

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
<div id="diagramContainer">
    <div id="item_1" class="item">Input 1</div>
    <div id="item_2" class="item" style="margin-left:50px;">Input 2</div>
    <div id="item_3" class="item" style="margin-left:50px;">Input 3</div>
</div>
<div id="item_input" class="itemin">PROJECT NAME</div>
<div class="down">
    <div id="downstream_1" class="ds">Output 1</div>
    <div id="downstream_2" class="ds">Output 2</div>
</div>

CSS

.item {
    height:80px;
    width: 80px;
    border: 1px solid blue;
    float: left;
}
.ds {
    width:100px;
    height:100px;
    border:1px solid brown;
    float:left;
    margin-left: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 () {
    /*First Instance*/
    var firstInstance = jsPlumb.getInstance();
    firstInstance.importDefaults({
    
        Connector: ["Bezier", {
            curviness: 0
        }],
        Anchors: ["BottomCenter", "TopCenter", "Right", "Left"],
        
        
    });

    firstInstance.connect({
        source: "item_1",
        target: "item_input",
        scope: "someScope",
        Anchor : [ 0.5, 0.5, 1, 1 ],
        
    });
    firstInstance.connect({
        source: "item_2",
        target: "item_input",
        scope: "someScope"
    });
     firstInstance.connect({
        source: "item_3",
        target: "item_input",
        scope: "someScope"
    });
    
    /*Second Instance*/
    var secondInstance = jsPlumb.getInstance();
    secondInstance.importDefaults({
        Connector: ["Bezier", {
            curviness: 150
        }],
        Anchors: ["BottomCenter", "TopCenter"]
    });

    secondInstance.connect({
        source: "item_input",
        target: "downstream_1",
        scope: "someScope"
    });
    secondInstance.connect({
        source: "item_input",
        target: "downstream_2",
        scope: "someScope"
    });
});