Printing

Printing a Diagram is typically accomplished by making several images of the Diagram and either saving them, inserting them into a PDF or other document, or printing them directly from the browser. On this page we will create several images out of a large Diagram and prepare some CSS so that printing this page prints only those images.

This page uses Diagram.makeSvg, which has its own introduction page: Making Images with GoJS.

Depending on your situation, you may want to use raster images to print instead, and there is also a page on Making Images with GoJS, which is nearly identical to making images. In this page's examples you could substitute Diagram.makeImage for the same result.

Below is the Diagram we are going to prepare for printing.

  window.myDiagram = diagram;
  myDiagram.autoScale = go.AutoScale.Uniform;

  // define the Node template
  myDiagram.nodeTemplate =
    new go.Node("Spot", { locationSpot: go.Spot.Center })
      .add(
        new go.Shape("Rectangle",
            { fill: "lightgray",  // the initial value, but data-binding may provide different value
              stroke: "black",
              desiredSize: new go.Size(30, 30) })
          .bind("fill"),
        new go.TextBlock()
          .bind("text")
      );

  // define the Link template to be minimal
  myDiagram.linkTemplate =
    new go.Link({ selectable: false })
      .add(new go.Shape());

  myDiagram.layout = new go.LayeredDigraphLayout();

  var minNodes = 125, maxNodes = 125;
  myDiagram.startTransaction("generateDigraph");
  // replace the diagram's model's nodeDataArray
  var nodeArray = [];
  // get the values from the fields and create a random number of nodes within the range
  var min = parseInt(minNodes, 10);
  var max = parseInt(maxNodes, 10);
  if (isNaN(min)) min = 0;
  if (isNaN(max) || max < min) max = min;
  var numNodes = Math.floor(Math.random() * (max - min + 1)) + min;
  var i;
  for (i = 0; i < numNodes; i++) {
    nodeArray.push({
      key: i,
      text: i.toString(),
      fill: go.Brush.randomColor()
    });
  }

  // randomize the node data
  for (i = 0; i < nodeArray.length; i++) {
    var swap = Math.floor(Math.random() * nodeArray.length);
    var temp = nodeArray[swap];
    nodeArray[swap] = nodeArray[i];
    nodeArray[i] = temp;
  }

  // set the nodeDataArray to this array of objects
  myDiagram.model.nodeDataArray = nodeArray;
  // replace the diagram's model's linkDataArray
  var linkArray = [];
  var nit = myDiagram.nodes;
  var nodes = new go.List();
  nodes.addAll(nit);
  for (let i = 0; i < nodes.count - 1; i++) {
    var from = nodes.elt(i);
    var numto = Math.floor(1 + (Math.random() * 3) / 2);
    for (let j = 0; j < numto; j++) {
      var idx = Math.floor(i + 5 + Math.random() * 10);
      if (idx >= nodes.count) idx = i + (Math.random() * (nodes.count - i)) | 0;
      var to = nodes.elt(idx);
      linkArray.push({ from: from.data.key, to: to.data.key });
    }
  }
  myDiagram.model.linkDataArray = linkArray;
  myDiagram.commitTransaction("generateDigraph");

  // print the diagram by opening a new window holding SVG images of the diagram contents for each page
  function printDiagram(width, height) {
    if (!width) width = 700;
    if (!height) height = 960;
    const svgWindow = window.open();
    if (!svgWindow) return; // failure to open a new Window
    svgWindow.document.title = "GoJS Flowchart";
    svgWindow.document.body.style.margin = "0px";
    const printSize = new go.Size(width, height);
    const bnds = myDiagram.documentBounds;
    let x = bnds.x;
    let y = bnds.y;
    while (y < bnds.bottom) {
      while (x < bnds.right) {
        const svg = myDiagram.makeSvg({
          scale: 1.0,
          position: new go.Point(x, y),
          size: printSize,
          background: myDiagram.themeManager.findValue('div', 'colors'),
        });
        svgWindow.document.body.appendChild(svg);
        x += printSize.width;
      }
      x = bnds.x;
      y += printSize.height;
    }
    setTimeout(() => { svgWindow.print(); svgWindow.close(); }, 1);
  }
  window.printDiagram = printDiagram;

Our code for print preparation is in a printDiagram function that cuts the Diagram into several images of a given width and height and renders each such page individually. Those images are in a separate window just to make it easier to manage than combining them with the contents of this page.

  // print the diagram by opening a new window holding SVG images of the diagram contents for each page
  function printDiagram(width, height) {
    if (!width) width = 700;
    if (!height) height = 960;
    const svgWindow = window.open();
    if (!svgWindow) return; // failure to open a new Window
    svgWindow.document.title = "GoJS Printing";
    svgWindow.document.body.style.margin = "0px";
    const printSize = new go.Size(width, height);
    const bnds = myDiagram.documentBounds;
    let x = bnds.x;
    let y = bnds.y;
    while (y < bnds.bottom) {
      while (x < bnds.right) {
        const svg = myDiagram.makeSvg({
          scale: 1.0,
          position: new go.Point(x, y),
          size: printSize,
          background: myDiagram.themeManager.findValue('div', 'colors'),
        });
        svgWindow.document.body.appendChild(svg);
        x += printSize.width;
      }
      x = bnds.x;
      y += printSize.height;
    }
    setTimeout(() => { svgWindow.print(); svgWindow.close(); }, 1);
  }