JSFiddle - React, Tailwind, and code Playground

by emanuelbsilva

HTML

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

CSS

#container {
    width: 100%;
    height: 500px;
}

JavaScript

// data
var network = 'dinetwork { ';
// This attribute applies to the graph itself
network += 'size="1,1";';
// The label attribute can be used to change the label of a node
network += 'a [label="should i stop \n working on this project \n or not?"];';
network += 'a [shape="text"];';
// Here, the node shape is changed.
network += 'b [shape=diamond];';

network += 'b [label=decision];';
// These edges both have different line properties
network += 'a -- b -- c [color=blue];';
network += 'b -> d [style=dotted]; }';


// provide data in the DOT language
var DOTstring = 'dinetwork {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
var parsedData = vis.network.convertDot(network);

var data = {
  nodes: parsedData.nodes,
  edges: parsedData.edges
}

console.log(data);
var options = parsedData.options;

// you can extend the options like a normal JSON variable:
options.nodes = {
}

// create a network
var network = new vis.Network(document.getElementById('container'), data, options);

  network.on("beforeDrawing", function (ctx) {
    var nodeId = 'a';
      console.log(network.getPositions([nodeId]));
    var nodePosition = network.getPositions([nodeId]);

      ctx.beginPath();
      console.log(this.width);
      var x = nodePosition[nodeId].x;
      var y = nodePosition[nodeId].y;
      var b = network.getBoundingBox(nodeId);
      ctx.moveTo(b.left -  20, y);
      ctx.lineTo(x , b.bottom + 30);
      ctx.lineTo(b.right + 20,  y);
      ctx.lineTo(x, b.top - 30);

      //Define the style of the shape
      ctx.lineWidth = 1;
      ctx.fillStyle = "rgb(102, 204, 0)";
      ctx.strokeStyle = "rgb(0, 50, 200)";

      //Close the path
      ctx.closePath();

      //Fill the path with ourline and color
      ctx.fill();
      ctx.stroke();

  });