JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<button id="extraEdges">Toggle Extra Edges</button>
<div id="container">
  <div id="network"></div>
  <canvas width="600" height="400" id="overlay"></canvas>
</div>

CSS

#container {
  width: 100%;
  height: 90vh;
  border: 1px solid lightgray;
  position: relative;
}

#network, #overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#overlay {
  z-index: 100;
  pointer-events: none;
}

JavaScript

// create an array with nodes
var nodes = new vis.DataSet([
  { id: 1, label: "Node 1" },
  { id: 2, label: "Node 2" },
  { id: 3, label: "Node 3" },
  { id: 4, label: "Node 4" },
  { id: 5, label: "Node 5" },
  { id: 6, label: "Node 6" },
  { id: 7, label: "Node 7" },
]);

// create an array with edges
var edges = new vis.DataSet([
  { from: 1, to: 2 },
  { from: 2, to: 3 },
  { from: 3, to: 4 },
  { from: 3, to: 5 },
  { from: 3, to: 6 },
  { from: 6, to: 7 }
]);

// create an array with extra edges displayed on button press
var extraEdges = [
  { from: 7, to: 5 },
  { from: 6, to: 1 }
];

// create a network
var container = document.getElementById("network");
var data = {
  nodes: nodes,
  edges: edges,
};
var options = {
  layout: {
    hierarchical: {
      enabled: true,
      direction: 'LR',
      sortMethod: 'directed',
      shakeTowards: 'roots'
    }
  }
};
var network = new vis.Network(container, data, options);

// Create an overlay for displaying extra edges
var overlayCanvas = document.getElementById("overlay");
var overlayContext = overlayCanvas.getContext("2d");

// Function called to draw the extra edges, called on initial display and
// when the network completes each draw (due to drag, zoom etc.)
function drawExtraEdges(){
  // Resize overlay canvas in case the continer has changed
  overlayCanvas.height = container.clientHeight;
  overlayCanvas.width = container.clientWidth;
  
  // Begin drawing path on overlay canvas
  overlayContext.beginPath();
  
  // Clear any existing lines from overlay canvas
  overlayContext.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);
  
  // Loop through extra edges to draw them
	extraEdges.forEach(edge => {
    // Gather the necessary coordinates for the start and end shapres
    const startPos = network.canvasToDOM(network.getPosition(edge.from));
    const endPos = network.canvasToDOM(network.getPosition(edge.to));
    const endBox = network.getBoundingBox(edge.to);
    
    // Determine the...