JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.0/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.0/vis.min.css">
<div id="mynetwork"></div>

CSS

#mynetwork {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

JavaScript

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'}
  ]);

//  EdgeBase.prototype.drawArrowHead = function() {};

  // create an array with edges
  var edges = new vis.DataSet([
    {from: 1, to: 3, id: '1', length: 200,
     arrows: { enabled: true, from: true, middle: true, to: true }},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5}
  ]);

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {};
  var network = new vis.Network(container, data, options);

  function extendNetwork( __network ) {
    __network.getEdgeById = function ( id ) {
      return __network.edgesHandler.body.edges[ id ];
    }
  }

  extendNetwork( network );

  network.getEdgeById('1').drawArrows = function drawArrows(ctx, arrowData) {
    if (this.options.arrows.from.enabled === true) {
      drawArrowCircle(ctx, this.selected, this.hover, arrowData.from);
    }
    if (this.options.arrows.middle.enabled === true) {
      drawArrowDiamond(ctx, this.selected, this.hover, arrowData.middle);
    }
    if (this.options.arrows.to.enabled === true) {
      this.edgeType.drawArrowHead(ctx, this.selected, this.hover, arrowData.to);
    }
  }

  function drawArrowCircle(ctx, selected, hover, arrowData) {
    ctx.fillStyle = '#ff0000';
    ctx.circle(arrowData.point.x, arrowData.point.y, 15);
    ctx.fill();
    ctx.fillStyle = '#00ff00';
    ctx.circle(arrowData.point.x, arrowData.point.y, 10);
    ctx.fill();
  }

  function drawArrowDiamond(ctx, selected, hover, arrowData) {
    ctx.fillStyle = '#ff0000';
    ctx.diamond(arrowData.point.x, arrowData.point.y, 15);
    ctx.fill();
  }