JSFiddle - React, Tailwind, and code Playground

by Aniruddha Galgali

HTML

<script src="https://gojs.net/beta/release/go-debug.js"></script>
<body>

  <div id="myDiagramDiv" style="border: solid 3px red; width:1500px; height:300px"></div>
</body><script src="https://gojs.net/beta/release/go-debug.js"></script>
<body>

  <div id="myDiagramDiv" style="border: solid 3px red; width:1500px; height:300px"></div>
  <p><a href="https://gojs.net"/>gojs.net<a/></p>
</body>

JavaScript

function init() {
    var $ = go.GraphObject.make;
    myDiagram = $(go.Diagram, "myDiagramDiv",
                  {initialContentAlignment: go.Spot.Center,"undoManager.isEnabled": true});

    myDiagram.nodeTemplate =
      $(go.Node, "Auto", 
        $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
        $(go.TextBlock, { margin: 8 }, new go.Binding("text", "text"))
      );
    
    myDiagram.addDiagramListener("ViewportBoundsChanged", (e) => 
    {
      let dia = e.diagram;
      let node = dia.findNodeForKey(1);
      node.location = dia.transformViewToDoc(new go.Point(500, 150)); 
    });
    
    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text:"Alpha", color: "lightblue" },
      { key: 2, text:"Beta", color: "orange" },
      { key: 3, text:"Gamma", color: "lightgreen" },
      { key: 4, text:"Delta", color: "pink" }
    ]);

  }
init();