JSFiddle - React, Tailwind, and code Playground

HTML

<style>
    .tree-div {
        width: 100%;
        height: 500px;
        border: 1px solid gray;
    }
</style>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<script>
   
</script>
<body onload="init()">
    <div id="tree" class="tree-div"></div>
</body>

JavaScript

function init() {
   var $ = go.GraphObject.make;
   var diagram;
   var model =  new go.GraphLinksModel();
  diagram = $(go.Diagram, 'tree', {
      layout: $(go.TreeLayout, {
        isOngoing: true,
        treeStyle: go.TreeLayout.StyleLastParents,
        arrangement: go.TreeLayout.ArrangementHorizontal,
        nodeSpacing: 20,
        // properties for most of the tree:
        layerSpacing: 100,
        // properties for the "last parents":
        alternateLayerSpacing: 35,
        alternateNodeSpacing: 20,
      }),
      'undoManager.isEnabled': true,
    });
   diagram.nodeTemplate = 
   $(
      go.Node,
      'Auto',
      
      new go.Binding('text', 'dialogue'),
      // define the node's outer shape
      $(
        go.Shape,
        'RoundedRectangle',
        {
          name: 'SHAPE',
          fill: 'lightblue',
          stroke: 'black',
          // set the port properties:
        },
        new go.Binding('fill', '', (node) => {
          // modify the fill based on the tree depth level
          const levelColors = ['#2cb572', '#ffff', '#5e72e4', '#f5365c'];
          let color = node.findObject('SHAPE').fill;
          const dia = node.diagram;
          if (dia && dia.layout.network) {
            dia.layout.network.vertexes.each((v) => {
              if (v.node && node.data.type === 'DIALOGUE') {
                color = levelColors[0];
              } else if (v.node && node.data.type === 'SEND_TO_PHONE') {
                color = levelColors[2];
              } else if (v.node && node.data.type === 'END_SESSION') {
                color = levelColors[3];
              } else {
                color = levelColors[1];
              }
            });
          }
          return color;
        }).ofObject(),
      ),
      $(
        go.Panel,
        'Horizontal',
        // define the panel where the text will appear
        $(
          go.Panel,
          'Table',
          {
            maxSize: new go.Size(150, 999),
           ...