Download diagram

I want to download the diagram as an image or any other possible format.
I know I can use this

var imageData = this.myDiagram.makeImageData();

but how can I download my diagram locally?

First, I suggest using Diagram.makeSvg.

Second, you could use the Filesystem and FileWriter APIs, but not on Firefox, IE, Edge, or Safari: Can I use... Support tables for HTML5, CSS3, etc

But since that won’t work cross-browser, you’ll need to upload and allow the user to download the image file.

@walter I need it to be working on chrome.
Do you have a working example to download the diagram?.
My requirement is to download the exact copy of the canvas including background.

I don’t have such a sample available, since we rarely try something unless it is supported on almost all browsers.

If you run into any problems that are specific to GoJS, we’ll be happy to answer. But as long as the generated SVG is correct, GoJS would not be involved in writing out an SVG file.

@walter I got you

I am following this logic
$scope.down = function () {

		var newWindow = window.open("","newWindow");
		if (!newWindow) return;
		var newDocument = newWindow.document;
		var svg = $scope.myDiagram.makeSvg({
			document: newDocument,  // create SVG DOM in new document context
			//scale: 1,
			maxSize: new go.Size(NaN, NaN)
		});
		newDocument.body.appendChild(svg);
	};

My canvas is this :

But the svg in new window is this

Can you help me in understanding where I am doing wrong as the image size is supposed to be the node size.

This might be an issue with GoJS. Can you share the node template you are using?

@simon
Here you go my code:
Layout: GridLayout

$scope.myDiagram.nodeTemplate =
  $(go.Node, "Spot",
    // make sure the Node.location is different from the Node.position
    {
      //stretch: go.GraphObject.Horizontal,
      locationSpot: go.Spot.TopLeft,
      resizable: true,
      name: 'shape',
      locationObjectName: 'shape',
      resizeObjectName: 'shape', // user can resize the Shape
      selectionAdorned: false, // no selection handle when selected
      selectionChanged: $scope.onSelectionChanged
    },

    new go.Binding("text", "text"), // for sorting
    new go.Binding("margin", "setMargin"),
    
    $(go.Panel,
      {
        isPanelMain: true
      },


      $(go.Shape, "Rectangle",
        {
          name: "Icon",
          fill: "lightgray",
          stroke: "black"
          //desiredSize: new go.Size(100, 100)

        },

        new go.Binding("fill", "fill"),
        new go.Binding("desiredSize", "size"))
    ),
    
    $(go.Picture,
      // stretch the image to occupy all the space
      {imageStretch: go.GraphObject.UniformToFill},
      //new go.Binding("source", "img"),
      new go.Binding("desiredSize", "size"),
      new go.Binding("element")
    ),

    $(go.TextBlock,
      // the default alignment is go.Spot.Center
      new go.Binding("text", "text"))
  );

That’s strange, I don’t see any isssue in a simplistic test I made:

@simon
I really appreciate your efforts to reproduce.
Let me compare if you did something different that I might be missing and I will let you know if it will not work
Thanks

I am using Version 5.19 of GoJs
Do you think it is the old version that might not let it work.

That’s quite possible, try it with the latest version and see.