JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jsplumb.org/js/jquery.jsPlumb-1.3.14-all.js"></script>
<div id="start" class="handle">Start</div>
<div id="then" class="activity">Then</div>
<div id="else" class="activity">Else</div>
<div id="end" class="handle">End</div>

CSS

.handle{
    border: 1px solid black;
    position: absolute;
    height: 20px;
    width: 50px;
}

.activity{    border: 1px solid black;
    position: absolute;
}

#start { left: 150px; }
#then { top: 120px; width: 100px; height: 50px; }
#else { left: 150px; top: 100px; width: 200px; height: 200px; }
#end { left: 150px; top: 400px; }

JavaScript

jsPlumb.ready(function() {
    jsPlumb.Defaults.Connector = ["Flowchart", {stub:10}];
    var endpointOptions = {
        enabled: false,
        maxConnections: -1,
        endpoint: 'Blank'
    };

    var start = jsPlumb.addEndpoint("start", {
        anchor: "BottomCenter"
    }, endpointOptions);
    var targetThen = jsPlumb.addEndpoint("then", {
        anchor: "TopCenter"
    }, endpointOptions);
    var srcThen = jsPlumb.addEndpoint("then", {
        anchor: "BottomCenter"
    }, endpointOptions);
    var targetElse = jsPlumb.addEndpoint("else", {
        anchor: "TopCenter"
    }, endpointOptions);
    var srcElse = jsPlumb.addEndpoint("else", {
        anchor: "BottomCenter"
    }, endpointOptions);
    jsPlumb.makeTarget("end", { 
        anchor:["LeftMiddle", "TopCenter" ],
    }, endpointOptions);

    jsPlumb.connect({
        source: start,
        target: targetThen
    });
    jsPlumb.connect({
        source: start,
        target: targetElse
    });
    jsPlumb.connect({
        source: srcThen,
        target: "end"
    });
    jsPlumb.connect({
        source: srcElse,
        target: "end"
    });
});