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

  <div id="myDiagramDiv" style="border: solid 3px red; width:600px; 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
      {
        scale: 2,
        initialContentAlignment: go.Spot.Center, // center the content
        "undoManager.isEnabled": true // enable undo & redo
      });

    // define a simple Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Vertical", // the Shape will go around the TextBlock
        $(go.TextBlock, "LgLgLgLgLgLg", {
          stroke: "white",
          margin: new go.Margin(0, 3),
          background: 'blue',
          font: "12pt sans-serif",
          wrap: go.TextBlock.None,
          alignment: go.Spot.Center,
          overflow: go.TextBlock.OverflowEllipsis
        })
      );

    // but use the default Link template, by not setting Diagram.linkTemplate

    // 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"
      }, {
        key: "Gamma",
        color: "lightgreen"
      }, {
        key: "Delta",
        color: "pink"
      }], [{
        from: "Alpha",
        to: "Beta"
      }, {
        from: "Alpha",
        to: "Gamma"
      }, {
        from: "Beta",
        to: "Beta"
      }, {
        from: "Gamma",
        to: "Delta"
      }, {
        from: "Delta",
        to: "Alpha"
      }]);
  }

  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.