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

  <div id="myDiagramDiv" style="border: solid 3px red; width:300px; height:300px"></div>
  <a id="btnSave" download="myfile.png">download</a>
  
  <p><a href="https://gojs.net"/>gojs.net<a/></p>
</body>
  function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram =
      $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
        {
          // position the graph in the middle of the diagram
          initialContentAlignment: go.Spot.Center,

          "undoManager.isEnabled": true
        });


    var nodeDataArray = [
      { key: 1, text: "Alpha", color: "lightblue" },
      { key: 2, text: "Beta", color: "orange" },
      { key: 3, text: "Gamma", color: "lightgreen" },
      { key: 4, text: "Delta", color: "pink" }
    ];
    var linkDataArray = [
      { from: 1, to: 2, color: "blue", meters: 5 }
    ];
    myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);


    myDiagram.startTransaction();
    myDiagram.commitTransaction();
    var image = myDiagram.makeImageData();
    var anchor = document.getElementById('btnSave');
    anchor.setAttribute('href', image);

  
  }

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.