JSFiddle - React, Tailwind, and code Playground

by remguif

HTML

<script src="http://gojs.net/latest/release/go.js"></script>
<div id="sample">
  <div id="myDiagram" style="border: solid 1px black; width:100%; height:600px"></div>
  This sample demonstrates one way of defining a UML Class Diagram.
  Note the use of a separate Panel for the properties and one for the methods,
  allowing for an item template for properties and a separate item template for methods.
</div>

JavaScript

function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;
    myDiagram =
      $(go.Diagram, "myDiagram",
        {
          initialContentAlignment: go.Spot.Center,
          "undoManager.isEnabled": true,
          layout: $(go.TreeLayout,
                    { // this only lays out in trees nodes connected by "generalization" links
                      angle: 90,
                      path: go.TreeLayout.PathSource,  // links go from child to parent
                      setsPortSpot: false,  // keep Spot.AllSides for link connection spot
                      setsChildPortSpot: false,  // keep Spot.AllSides
                      // nodes not connected by "generalization" links are laid out horizontally
                      arrangement: go.TreeLayout.ArrangementHorizontal
                    })
        });
    // show visibility or access as a single character at the beginning of each property or method
    function convertVisibility(v) {
      switch (v) {
        case "public": return "+";
        case "private": return "-";
        case "protected": return "#";
        case "package": return "~";
        default: return v;
      }
    }
    // the item template for properties
    var propertyTemplate =
      $(go.Panel, "Horizontal",
        // property visibility/access
        $(go.TextBlock,
          { isMultiline: false, editable: false, width: 12 },
          new go.Binding("text", "visibility", convertVisibility)),
        // property name, underlined if scope=="class" to indicate static property
        $(go.TextBlock,
          { isMultiline: false, editable: true },
          new go.Binding("text", "name").makeTwoWay(),
          new go.Binding("isUnderline", "scope", function(s) { return s[0] === 'c' })),
        // property type, if known
        $(go.TextBlock, "",
          new go.Binding("text", "type", function(t) { return (t ? ": " : ""); })),
    ...