JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githack.com/sporritt/jsPlumb/master/dist/js/dom.jsPlumb-1.7.5-min.js"></script>
<div id="botoes">
            <button id="addBloco">Adicionar Bloco</button>
            <button id="salvar">Salvar</button>
            <button id="render">Reverso</button>
            
            <input type="text" value='{"bloco":[{"blockId":"g1","positionX":901,"positionY":68},{"blockId":"g2","positionX":568,"positionY":102},{"blockId":"g3","positionX":346,"positionY":82},{"blockId":"g4","positionX":181,"positionY":239},{"blockId":"g5","positionX":511,"positionY":298},{"blockId":"g6","positionX":698,"positionY":227}],"conector":[{"connectionId":"con_52","pageSourceId":"g1","pageTargetId":"g6","anchors":[[0.5,1,0,1,0,0],[1,0.5,1,0,0,0]]},{"connectionId":"con_57","pageSourceId":"g4","pageTargetId":"g5","anchors":[[0.5,0,0,-1,0,0],[0,0.5,-1,0,0,0]]},{"connectionId":"con_62","pageSourceId":"g2","pageTargetId":"g4","anchors":[[0.5,0,0,-1,0,0],[1,0.5,1,0,0,0]]},{"connectionId":"con_67","pageSourceId":"g3","pageTargetId":"g6","anchors":[[0.5,1,0,1,0,0],[0,0.5,-1,0,0,0]]},{"connectionId":"con_72","pageSourceId":"g6","pageTargetId":"g1","anchors":[[0.5,0,0,-1,0,0],[0,0.5,-1,0,0,0]]},{"connectionId":"con_77","pageSourceId":"g2","pageTargetId":"g5","anchors":[[0.5,1,0,1,0,0],[1,0.5,1,0,0,0]]},{"connectionId":"con_82","pageSourceId":"g5","pageTargetId":"g4","anchors":[[0.5,1,0,1,0,0],[0,0.5,-1,0,0,0]]},{"connectionId":"con_87","pageSourceId":"g3","pageTargetId":"g3","anchors":[[0.5,0,0,-1,0,0],[0,0.5,-1,0,0,0]]},{"connectionId":"con_92","pageSourceId":"g6","pageTargetId":"g1","anchors":[[0.5,1,0,1,0,0],[1,0.5,1,0,0,0]]},{"connectionId":"con_97","pageSourceId":"g5","pageTargetId":"g2","anchors":[[0.5,0,0,-1,0,0],[0,0.5,-1,0,0,0]]},{"connectionId":"con_102","pageSourceId":"g1","pageTargetId":"g2","anchors":[[0.5,0,0,-1,0,0],[1,0.5,1,0,0,0]]}]}' id="con" />
        </div>
        
        <div id="grafico">
            <!--<div id="g1" class="window"></div>-->
       ...

CSS

html, body {width:100%;height:100%;overflow:hidden;}
body {background-color:#fff;margin:0;padding:0;}
#botoes {background-color:#ccc;padding:10px;box-shadow:0 0 3px #333;}
#grafico {width:100%;height:100%;position:relative;font-size: 80%;text-align: center;}
#addBloco {cursor:pointer;}
.window {display:block;width:100px;height:100px;border:2px solid green;background-color: #eeeeef;border-radius: 0.5em;box-shadow: 2px 2px 19px #aaa;color: black;cursor: pointer;font-family: helvetica;font-size: 0.9em;height: 80px;line-height: 80px;opacity: 0.8;padding: 0.5em;position: absolute;text-align: center;transition: box-shadow 0.15s ease-in 0s;width: 80px;z-index: 20;}
._jsPlumb_endpoint, .endpointTargetLabel, .endpointSourceLabel {cursor: pointer;z-index: 21;}

JavaScript

jsPlumb.ready(function() {

    // Instancia Objeto
    var instancia = jsPlumb.getInstance({
        DragOptions: { cursor: 'pointer', zIndex: 2000 },
        ConnectionOverlays: [
            [ "Arrow", { location: 1 } ],
            [ "Label", {
                location: 0.1,
                id: "label",
                cssClass: "aLabel"
            }]
        ],
        Container: "grafico"
    });

    /* # ESTILO # */

    var connectorPaintStyle = {
        lineWidth: 4,
        strokeStyle: "#61B7CF",
        joinstyle: "round",
        outlineColor: "white",
        outlineWidth: 2
    },

    connectorHoverStyle = {
        lineWidth: 4,
        strokeStyle: "#216477",
        outlineWidth: 2,
        outlineColor: "white"
    },

    endpointHoverStyle = {
        fillStyle: "#216477",
        strokeStyle: "#216477"
    },

    sourceEndpoint = {
        endpoint: "Dot",
        paintStyle: {
            strokeStyle: "#7AB02C",
            fillStyle: "transparent",
            radius: 7,
            lineWidth: 3
        },
        isSource: true,
        connector: [ "Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true } ],
        connectorStyle: connectorPaintStyle,
        hoverPaintStyle: endpointHoverStyle,
        connectorHoverStyle: connectorHoverStyle,
        dragOptions: {},
        /*overlays: [
            [ "Label", {
                location: [0.5, 1.5],
                label: "Drag",
                cssClass: "endpointSourceLabel"
            } ]
        ]*/
    },

    targetEndpoint = {
        endpoint: "Dot",
        paintStyle: { fillStyle: "#7AB02C", radius: 11 },
        hoverPaintStyle: endpointHoverStyle,
        maxConnections: -1,
        dropOptions: { hoverClass: "hover", activeClass: "active" },
        isTarget: true,
        /*overlays: [
            [ "Label", { location: [0.5, -0.5], label: "Drop", cssClass: "endpointTargetLabel" } ]
        ]*/
    },

    init = function (connection) {
 ...