JSFiddle - React, Tailwind, and code Playground

by Ba2siK

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.2.0/go.js"></script>
<div id="myDiagram" style="border: solid 1px black; width:550px; height:400px">

JavaScript

function init() {
    
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram =
      $(go.Diagram, "myDiagram",  // create a Diagram for the DIV HTML element
        {
          // position the graph in the middle of the diagram
          initialContentAlignment: go.Spot.Center,
          layout: $(go.LayeredDigraphLayout)
        });

    // Define the appearance and behavior for Nodes:

    function nodeInfo(d) {  // Tooltip info for a node data object
      var str = "Node " + d.key + ": " + d.text + "\n";
      if (d.group)
        str += "member of " + d.group;
      else
        str += "top-level node";
      return str;
    }

    // These nodes have text surrounded by a rounded rectangle
    // whose fill color is bound to the node data.
    // The user can drag a node by dragging its TextBlock label.
    // Dragging from the Shape will start drawing a new link.
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        { locationSpot: go.Spot.Center },
        $(go.Shape, "RoundedRectangle",
          {
            fill: "white", // the default fill, if there is no data-binding
            stroke: "#6699FF", width: 55, strokeWidth: 2,
            portId: "", cursor: "pointer",  // the Shape is the port, not the whole Node
          },
          new go.Binding("figure", "figure"),
          new go.Binding("fill", "color"),
          new go.Binding("width", "width"),
          new go.Binding("stroke", "stroke")),
        $(go.TextBlock,
          {
            font: "13px sans-serif",
            stroke: '#333',
            margin: 15,  // make some extra space for the shape around the text
            isMultiline: false,  // don't allow newlines in text
            editable: false  // allow in-place editing by user
          },
          new go.Binding("text", "text").makeTwoWay()),  // the label shows the node data's text
        { // this tooltip Adornment is shared by all nodes
          toolTip:
           ...