<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,
                    "undoManager.isEnabled": true  // enable undo & redo
                  });

    // define a simple Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle", { strokeWidth: 4, fill: 'white', stroke: 'blue'} ),
        $(go.Panel, "Horizontal",
          { margin: 5 },

          $(go.Panel, "Auto",
            $(go.Shape, "RoundedRectangle", { strokeWidth: 4, fill: 'white', stroke: 'blue'} ),
            $(go.TextBlock, "A",
              { margin: 8 },
              new go.Binding("text", "key"))
            ),

          $(go.Panel, "Auto",
            $(go.Shape, "RoundedRectangle", { strokeWidth: 4, fill: 'white', stroke: 'red' }),
            $(go.TextBlock, "B",
              { margin: 8 })
            ),

          $(go.Panel, "Auto",
            $(go.Shape, "RoundedRectangle", { strokeWidth: 4, fill: 'white', stroke: 'lime'} ),
            $(go.TextBlock, "C",
              { margin: 8 })
            )
          
        ) // end outer panel
      ); // end node


    // create the model data that will be represented by Nodes and Links
    myDiagram.model = new go.GraphLinksModel(
    [
      { key: "Alpha", color: "lightblue" },
      { key: "Beta", color: "orange" }
    ],
    [
    ]);
  }

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.