JSFiddle - React, Tailwind, and code Playground

by Ben Noble

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.33/go.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Minimal GoJS Sample with JSON</title>
<meta name="description" content="The Minimal sample, loading the model from a JSON data source." />
<!-- Copyright 1998-2018 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<!-- this is only for the GoJS Samples framework -->
<script id="code">
  function init() {
  // init for these samples -- you don't need to call this
    var $$ = go.GraphObject.make;  // for conciseness in defining templates, avoid $ due to jQuery
    myDiagram = $$(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
                   {
                     initialContentAlignment: go.Spot.Center,  // center the content
                     "undoManager.isEnabled": true  // enable undo & redo
                   });
    // define a simple Node template
    myDiagram.nodeTemplate =
      $$(go.Node, "Auto",  // the Shape will go around the TextBlock
        $$(go.Shape, "RoundedRectangle", { strokeWidth: 0},
          // Shape.fill is bound to Node.data.color
          new go.Binding("fill", "color")),
        $$(go.TextBlock,
          { margin: 8 },  // some room around the text
          // TextBlock.text is bound to Node.data.key
          new go.Binding("text", "key"))
      );
  var outJson={
  "nodes":[
{ "key":"Alpha", "color":"lightblue" },
{ "key":"Beta", "color":"orange" },
{ "key":"Gamma", "color":"lightgreen" },
{ "key":"Delta", "color":"pink" }
  ],
  "links":[
{ "from":"Alpha", "to":"Beta" },
{ "from":"Alpha", "to":"Gamma" },
{ "from":"Beta", "to":"Beta" },
{ "from":"Gamma", "to":"Delta" },
{ "from":"Delta", "to":"Alpha" }
  ]
};
    
myDiagram.model = new go.GraphLinksModel(outJson["nodes"], outJson["links"]);

   ...