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

measure(1000);

function measure(nodeNum) {
  performance.mark('start');
  paintGraph(nodeNum);
  performance.mark('end');
  performance.measure(
    'VisNetwork',
    'start',
    'end'
  );
  console.log(`nodes=${nodeNum}, duration=${performance.getEntriesByName('VisNetwork')[0].duration}ms`);
}

function paintGraph(nodeNum) {
  const nodes = []
  for (let i = 1; i <= nodeNum; i++) {
    nodes.push({
      id: i,
      label: `${i}`
    });
  }

  const edges = []
  for (let i = 1; i < nodeNum; i++) {
    edges.push({
      from: i,
      to: i + 1
    });
  }

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