JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>mxGraph sample</title>

    <script type="text/javascript">
      const mxLoadResources = false
      const mxLoadStylesheets = false

    </script>
    <script type="text/javascript" src="https://www.unpkg.com/mxgraph/javascript/mxClient.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://www.unpkg.com/mxgraph/javascript/src/css/common.css">
  </head>

  <body>
    <div id='export-button'></div>
    <div id="container"></div>
  </body>

</html>

JavaScript

measure(2000)

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

// nodeNum個のノードを1列に繋いだグラフを描画する
function paintGraph(nodeNum) {
  // グラフを表示する領域を確保
  const container = document.getElementById('container')
  // グラフのインスタンス生成
  const graph = new mxGraph(container)

  // グラフにノードやエッジを追加する際に必要
  const parent = graph.getDefaultParent()
  // 今回は階層グラフを自動レイアウトで描画したいため、レイアウトのインスタンスを生成
  const layout = new mxHierarchicalLayout(graph)

  // 高速化その1：グラフモデル更新中は描画をOFFにする
  graph.getView().setRendering(false)

  // 高速化その2：ignoreStringSizeを有効にする
  mxText.prototype.ignoreStringSize = true

  // グラフの形状やデザインの変更を行う(グラフモデルを変更する)際は
  // beginUpdate -> グラフモデル変更 -> endUpdate の順に行う
  graph.getModel().beginUpdate()

  try {
    // tryブロックの中でグラフの形状やデザインの変更を行う

    // ノード追加	
    for (let i = 1; i <= nodeNum; i++) {
      graph.insertVertex(parent, `node${i}`, `${i}`, null, null, 30, 30, null)
    }

    // エッジ追加
    for (let i = 1; i < nodeNum; i++) {
      const src = graph.getModel().getCell(`node${i}`)
      const dst = graph.getModel().getCell(`node${i+1}`)
      graph.insertEdge(parent, null, null, src, dst, null)
    }

    // 追加したノード・エッジに基づいてレイアウトの自動計算を行う
    layout.execute(parent)
  } finally {
    graph.getModel().endUpdate()
  }

  // 描画をオンに戻す
  graph.getView().setRendering(true)
  graph.refresh()
}