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


    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "Rectangle", { strokeWidth: 3, fill: 'coral' }),

        $(go.Panel, "Auto",
          { margin: 12 }, // The inner panel has a margin, which is the amount separating it from the outer panel
          $(go.Shape, "Rectangle", { strokeWidth: 3, strokeDashArray: [3,3], fill: 'lightblue' }),

          // The inner content after the "main" shape could be anything,
          // such as a Vertical panel containing many textblocks.
          // In this example it is just a single text block
          $(go.TextBlock,
            { margin: 10 }, // some room around the text
            new go.Binding("text", "key"))

        ) // end of inner panel
      ); // end of outer panel (node)

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: "Alpha" },
      { key: "Beta" },
      { key: "Gamma" },
      { key: "Delta" }
    ],
    [
    ]);
  }

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.