JSFiddle - React, Tailwind, and code Playground

by Anik Islam Abhi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.css">
<div id="network" style="width:100%;height:400px"></div>

JavaScript

var nodes = [{
  id: 1,
  label: "DEPANDABILITY",
  color: "#000"
}, {
  id: 2,
  label: "IMPAIRMENTS"
}, {
  id: 3,
  label: "MEANS"
}, {
  id: 4,
  label: "ATTRIBUTES"
}, {
  id: 5,
  label: "FAULTS"
}, {
  id: 6,
  label: "ERRORS"
}, {
  id: 7,
  label: "FAILURS"
}, {
  id: 8,
  label: "PROCUREMENT"
}, {
  id: 9,
  label: "VALIDATION"
}, {
  id: 10,
  label: "AVAILABILITY"
}, {
  id: 11,
  label: "RELIABILITY"
}, {
  id: 12,
  label: "SAFETY"
}, {
  id: 13,
  label: "SECURITY"
}, {
  id: 14,
  label: "FAULT PREVENTION"
}, {
  id: 15,
  label: "FAULT TOLERANCE"
}, {
  id: 16,
  label: "FAULT REMOVAL"
}, {
  id: 17,
  label: "FAULT FORECASTING "
}]


var edges = [{
  from: 1,
  to: 2
}, {
  from: 1,
  to: 3
}, {
  from: 1,
  to: 4
}, {
  from: 2,
  to: 5
}, {
  from: 2,
  to: 6
}, {
  from: 2,
  to: 7
}, {
  from: 3,
  to: 8
}, {
  from: 3,
  to: 9
}, {
  from: 4,
  to: 10
}, {
  from: 4,
  to: 11
}, {
  from: 4,
  to: 12
}, {
  from: 4,
  to: 13
}, {
  from: 8,
  to: 14
}, {
  from: 8,
  to: 15
}, {
  from: 9,
  to: 16
}, {
  from: 9,
  to: 17
}];

var data = {
  nodes: nodes,
  edges: edges
};
// create a network
var container = document.getElementById('network');
var options = {
  nodes: {
    borderWidth: 1,
    borderWidthSelected: 2,
    brokenImage: undefined,
    chosen: true,
    physics: false,
    color: {
      border: '#2B7CE9',
      background: '#97C2FC',
      highlight: {
        border: '#2B7CE9',
        background: '#D2E5FF'
      },
      hover: {
        border: '#2B7CE9',
        background: '#D2E5FF'
      }
    },
    fixed: {
      x: false,
      y: false
    },
    font: {
      color: '#343434',
      size: 14, // px
      face: 'arial',
      background: 'none',
      strokeWidth: 0, // px
      strokeColor: '#ffffff',
      align: 'center',
      multi: false,
      vadjust: 0,
    },
    shape: 'text'
  },
  
  layout: {
    hierarchical: {
      direction: "LR"
    }
  }
}
var network = new vis.Network(container, data, options);