JSFiddle - React, Tailwind, and code Playground

by cfarmerga

HTML

<script src="https://gojs.net/latest/release/go.js"></script>
<div id="sample">
    <div id="myDiagram" style="border: solid 1px black; width:100%; height:400px"></div>
</div>

JavaScript

init();

    function init() {
        
      var $ = go.GraphObject.make;  

      myDiagram =
        $(go.Diagram, "myDiagram",
          {
            initialContentAlignment: go.Spot.Center,
          });  

			var nodeTemplate = $(go.Node, "Table", 
      	{
        	background: 'lightgray',
          selectionObjectName: 'main'
          
        },
      	$(go.TextBlock, "topleft",
        	{ row: 0, column: 0, background: "lightgray", pickable: false }),
        $(go.TextBlock, "middle",
        	{ 
          	row: 1, 
            column: 1, 
            background: "lightgreen",
            name: 'main',
            height: 30,
            width: 50
            
          }),  
        $(go.TextBlock, "botright",
        	{ row: 2, column: 2, background: "lightgray", pickable: false })  
        
      );
      

      var model =
        $(go.GraphLinksModel,
          { 
            nodeDataArray: [
              { key: "One", loc: new go.Point(100, 150) },
              { key: "Two", loc: new go.Point(300, 100) },
              { key: "Three", loc: new go.Point(300, 200) }
            ]
            
          });

			myDiagram.nodeTemplate = nodeTemplate;
      //myDiagram.linkTemplate = linkTemplate;
      myDiagram.model = model;


    }