JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
     style="overflow:hidden;width:400px;height:400px;background:url('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/grid.gif')">
</div>
<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
  mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src/';
</script>

<!-- Loads and initializes the library -->
<script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>

JavaScript

var data = [
  {
    name: 'Globals',    
    parentObjects: []
  },

  {
    name: 'Customer',
    included: true,    
    parentObjects: [
      {
        name: 'Globals',
      }
    ],
  },

  {
    name: 'Product',
    included: true,    
    parentObjects: [
      {
        name: 'Globals',
      }
    ],
  },

  {
    name: 'Transaction',
    included: true,    
    parentObjects: [
      {
        name: 'Customer',
      },
      {
        name: 'Product',
      }
    ],
  },
];

// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main(container)
{
  // Checks if the browser is supported
  if (!mxClient.isBrowserSupported())
  {
    mxUtils.error('Browser is not supported!', 200, false);
  }
  else
  {
    // Creates the graph inside the given container
    var graph = new mxGraph(container);

    // Enables rubberband selection
    new mxRubberband(graph);

    // Gets the default root for inserting new cells. This
    // is normally the first child of the root (ie. layer 0).
    var parent = graph.getDefaultParent();
		var root = undefined;
    
    // Adds cells to the model in a single step
    graph.getModel().beginUpdate();

    try
    {
      var dict = {};
      // run through each element in json
      data.forEach(function(element) {
        var name = element.name;
        // create graph element
        var graphElement = graph.insertVertex(parent, null,
                                              name, 20, 20, 80, 30);
        // check if any parent element
        if(element.parentObjects.length > 0) {
        	// run through each parent element
        	element.parentObjects.forEach(function(parentObj) {
          	var parentGraphElement = dict[parentObj.name];
            // add line between current element and parent
        	graph.insertEdge(parent, null, '', parentGraphElement, graphElement);          
...