JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://gojs.net/latest/release/go.js"></script>


<body>

  <div id="myDiagramDiv" style="width:300px; height:300px; background: lightgray;"></div> 
  <p><a href="https://gojs.net"/>gojs. net<a/></p>
</body>

JavaScript

function init() {

      myDiagram = new go.Diagram("myDiagramDiv",  // create a Diagram for the DIV HTML element
        {
          renderer: 'svg',
          "undoManager.isEnabled": true  // enable undo & redo
        });

myDiagram.nodeTemplate =
  new go.Node("Auto", {
          toolTip: new go.Adornment(go.Panel.Spot, {
          background: 'white',
        }).add(new go.TextBlock().bind('text', 'key'))
    })  // the Shape will go around the TextBlock
    .add(new go.Shape("RoundedRectangle",
      { strokeWidth: 0, fill: "white" })  // no border; default fill is white
      .bind("fill", "color"))  // Shape.fill is bound to Node.data.color
    .add(new go.TextBlock(
      { margin: 8, font: "bold 14px sans-serif", stroke: '#333' })  // some room around the text
      .bind("text", "key"));  // TextBlock.text is bound to Node.data.key

      
myDiagram.model = new go.GraphLinksModel(
  [
    { key: "Alpha", color: "lightblue" },
    { key: "Beta", color: "orange" },
    { key: "Gamma", color: "lightgreen" },
    { key: "Delta", color: "pink" }
  ],
  [
    { from: "Alpha", to: "Beta" },
    { from: "Alpha", to: "Gamma" },
    { from: "Beta", to: "Beta" },
    { from: "Gamma", to: "Delta" },
    { from: "Delta", to: "Alpha" }
  ]);

} // end init


init();