JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Network</title>
    <script
      type="text/javascript"
      src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"
    ></script>
  </head>
  <body>
    <i class="fa fa-flag" style="visibility:hidden;"></i> 
    <div id="mynetwork"></div>
  </body>
</html>

CSS

#mynetwork {
  width: 100vw;
  height: 100vh;
  border: 1px solid lightgray;
}

JavaScript

const nodes = new vis.DataSet([
  { id: 1, label: '1' },
  { id: 2, label: '2' },
  { id: 3, label: '3' },
  { id: 4, label: '4' },
  { id: 5, label: '5' },
  { id: 6, label: '6' },
  { id: 7, label: '7' },
  { id: 8, label: '8' },
  { id: 9, label: '9' },
  { id: 10, label: '10' },
  { id: 11, label: '11' },
  { id: 12, label: '12' },
]);

const edges = new vis.DataSet([
  { from: 1, to: 3, arrows: 'to', color: 'orange' },
  { from: 1, to: 2 },
  { from: 2, to: 4 },
  { from: 2, to: 5 },
  { from: 3, to: 4 },
  { from: 3, to: 6 },
  { from: 3, to: 8 },
  { from: 6, to: 7 },
  { from: 6, to: 9 },
  { from: 4, to: 10 },
  { from: 4, to: 11 },
  { from: 5, to: 12 },
  { from: 1, to: 10, arrows: 'to', color: 'orange' },
  { from: 1, to: 8 }
]);

const container = document.getElementById("mynetwork");
const data = {
  nodes: nodes,
  edges: edges,
};
const options = {
  layout: {
    hierarchical: {
      // 有向グラフの根が上、葉が下にくるよう配置するよう指定
      sortMethod: 'directed'
    }
  }
};
const network = new vis.Network(container, data, options);