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)

// グラフの形状やデザインの変更を行う(グラフモデルを変更する)際は
// 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, null)
  
	// エッジ追加
	graph.insertEdge(parent, null, null, v1, v3, null)
	graph.insertEdge(parent, null, null, v1, v2, null)
	graph.insertEdge(parent, null, null, v2, v4, null)
	graph.insertEdge(parent, null, null, v2, v5, null)
	graph.insertEdge(parent, null, null, v3, v6, null)
	graph.insertEdge(parent, null, null, v3, v8, null)
	graph.insertEdge(parent, null, null, v6, v7, null)
	graph.insertEdge(parent, null, null, v6, v9, null)
	graph.insertEdge(parent, null, null, v4, v10, null)
	graph.insertEdge(parent, null, null, v4, v11, null)
	graph.insertEdge(parent, null, null, v5, v12, null)
	graph.insertEdge(parent, null, null, v3,...