JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

<script src="http://jsplumb.googlecode.com/files/jquery.jsPlumb-1.3.3-all-min.js"></script>
<div id="w1" class="w">1</div>
<div id="w2" class="w">2</div>
<div id="w3" class="w">3</div>

CSS

.w {
    width:3em; height:2em; border:1px solid blue;
    position:absolute;
    z-index:1;
    line-height:2em;
    text-align:center;
}

._jsPlumb_connector {
    z-index:0;
}

#w1 { left:12em; top:2em; }
#w2 { left:12em; top:8em; }
#w3 { left:12em; top:14em; }

JavaScript

jsPlumb.ready(function() {
    
    jsPlumb.Defaults.Endpoint = ["Dot", {radius:3} ];
//    jsPlumb.Defaults.Connector = "Straight";
    jsPlumb.Defaults.Connector = ["Bezier", {curviness:100}];
    jsPlumb.Defaults.PaintStyle = {
        lineWidth:2,
        strokeStyle:"black"
    };
    var bottomEdgeDynamicAnchors = [ [0.25, 1, 0, 1], [0.75, 1, 0, 1 ]];
    
    var topEdgeDynamicAnchors = [[0.25, 0, 0, -1], [0.75, 0, 0, -1 ]];
    
    var a1 = [bottomEdgeDynamicAnchors, topEdgeDynamicAnchors],
        a2 = [topEdgeDynamicAnchors, bottomEdgeDynamicAnchors];
    
    jsPlumb.Defaults.Overlays = [
        ["Arrow", {width:20, location:1}]
    ];
    
    jsPlumb.connect({source:"w1",target:"w2", anchors:a1});
    jsPlumb.connect({source:"w2",target:"w1", anchors:a2});

    jsPlumb.connect({source:"w2",target:"w3", anchors:a1});
    jsPlumb.connect({source:"w3",target:"w2", anchors:a2});
    
});