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="container"></div>
  </body>

</html>

JavaScript

// グラフを表示する領域を確保
const container = document.getElementById('container')
// グラフのインスタンス生成
const graph = new mxGraph(container)

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

// tooltipを有効にします
graph.setTooltips(true)

// tooltipで表示させたい内容を設定します
graph.getTooltipForCell = cell => {
  if (graph.getModel().isEdge(cell)) {
    const srcNodeLabel = cell.source.getValue()
    const dstNodeLabel = cell.target.getValue()
    return `this edge is directed from node ${srcNodeLabel} to node ${dstNodeLabel}`
  } else {
    const nodeLabel = cell.getValue()
    return `node ${nodeLabel}`
  }
}

// クリックしたノードをオレンジ色に変更します
graph.addListener('click', (sender, evt) => {
  const cell = evt.getProperty('cell')
  if (graph.getModel().isVertex(cell)) {
    graph.setCellStyles('fillColor', 'orange', [cell])
  }
})

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

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

  // ノード追加	
  const v1 = graph.insertVertex(parent, null, '1', null, null, 30, 30, null)
  const v2 = graph.insertVertex(parent, null, '2', null, null, 30, 30, null)
  const v3 = graph.insertVertex(parent, null, '3', null, null, 30, 30, null)
  const v4 = graph.insertVertex(parent, null, '4', null, null, 30, 30, null)
  const v5 = graph.insertVertex(parent, null, '5', null, null, 30, 30, null)
  const v6 = graph.insertVertex(parent, null, '6', null, null, 30, 30, null)
  const v7 = graph.insertVertex(parent, null, '7', null, null, 30, 30, null)
  const v8 = graph.insertVertex(parent, null, '8', null, null, 30, 30, null)
  const v9 = graph.insertVertex(parent, null, '9', null, null, 30, 30, null)
  const v10 = graph.insertVertex(parent, null, '10', null, null, 30, 30, null)
  const v11 = graph.insertVertex(parent, null, '11', null, null, 30, 30, null)
  const v12 = graph.insertVertex(parent, null, '12', null, null, 30, 30,...