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

  <div id="myDiagramDiv" style="border: solid 3px red; width:300px; height:300px"></div>
  
  <p><a href="https://gojs.net"/>gojs.net<a/></p>
</body>
  function init() {
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    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"))
      );

    myDiagram.groupTemplate =
        $(go.Group, "Auto",
          $(go.Shape, "Rectangle",
            { fill: "gold" }),
          $(go.Panel, "Vertical",
            { margin: 5,
              defaultAlignment: go.Spot.Left },
            $(go.Panel, "Horizontal",
              $("SubGraphExpanderButton",
                { margin: new go.Margin(0, 3, 5, 0) }),
              $(go.TextBlock, "Group")
            ),
            $(go.Placeholder)
          )
        );

    var nodeDataArray = [
      { key: 1, text: "Alpha", color: "lightblue" },
      { key: 2, text: "Beta", color: "orange" },
      { key: 3, text: "Gamma", color: "lightgreen", group: 5 },
      { key: 4, text: "Delta", color: "pink", group: 5 },
      { key: 5, text: "Epsilon", color: "green", isGroup: true }
    ];
    var linkDataArray = [

    ];
    myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
  }

init();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.