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

  <div id="myDiagramDiv" style="border: solid 1px black; width:300px; height:300px"></div>
  <button onclick="replaceDiagram()">Replace Diagram</button>
  <p><a href="https://gojs.net"/>gojs.net<a/></p>
</body>
function init() {
  var $ = go.GraphObject.make;

  myDiagram =
    $(go.Diagram, "myDiagramDiv",
      {
        initialContentAlignment: go.Spot.Center,
        "undoManager.isEnabled": true
      }
    );

  myDiagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, { fill: "lightgray" }),
      $(go.TextBlock, 
        { margin: 8 },
        new go.Binding("text", "key")
      )
    );

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

function replaceDiagram() {
  var $ = go.GraphObject.make;
  
  myDiagram.div = null;
  
  myDiagram =
    $(go.Diagram, "myDiagramDiv",
      {
        initialContentAlignment: go.Spot.Center,
        "undoManager.isEnabled": true
      }
    );

  myDiagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, { fill: "lightblue" }),
      $(go.TextBlock, 
        { margin: 8 },
        new go.Binding("text", "key")
      )
    );

  myDiagram.model = new go.GraphLinksModel(
    [
      { key: "Delta"},
      { key: "Epsilon" },
      { key: "Omega" }
    ],
    [
      { from: "Epsilon", to: "Omega" }
    ]
  );
}

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.