# Creating Images on the Server

It may be useful for many applications to create images of Diagrams with GoJS, and this page details some of the options for such a task.

## Puppeteer

Puppeteer is a Node library which provides a high-level API to control headless Chrome. We can use it to create images server-side. If you have Node and npm installed you can install it with `npm install puppeteer`.

The following code is a small example using Puppeteer. If you saved the JavaScript as `puppet.js` and run it with node (`node createImage.js`) it demonstrate creating two images: One from the Diagram called `gojs-screenshot.png` and one of the HTML page called `page-screenshot.png`. The Diagram code in the sample is the same as that in the Minimal sample.

    // This example loads the GoJS library then adds HTML from scratch and evaluates some JavaScript,
    // then creates a screenshot of Diagram with makeImageData, plus a screenshot of the page.

    const puppeteer = require('puppeteer');
    const fs = require('fs');

    const parseDataUrl = (dataUrl) => {
      const matches = dataUrl.match(/^data:(.+);base64,(.+)$/);
      if (matches.length !== 3) {
        throw new Error('Could not parse data URL.');
      }
      return { mime: matches[1], buffer: Buffer.from(matches[2], 'base64') };
    };

    (async () => {
      const browser = await puppeteer.launch();
      const page = await browser.newPage();

      // Point to a version of go.js, either a local file or one on the web at a CDN
      await page.addScriptTag({
        url: 'https://unpkg.com/gojs'
        // path: '../../release/go.js'
      });

      // Create HTML for the page:
      page.setContent('<div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"></div>');

      // Set up a Diagram, and return the result of makeImageData:
      const imageData = await page.evaluate(() => {
        var $ = go.GraphObject.make;

        var myDiagram = $(go.Diagram, "myDiagramDiv",
          {
            "animationManager.isEnabled": false,
            "undoManager.isEnabled": true  // enable undo & redo
          });

        // define a simple Node template
        myDiagram.nodeTemplate =
          $(go.Node, "Auto",  // the Shape will go around the TextBlock
            $(go.Shape, "RoundedRectangle", { strokeWidth: 0 },
              new go.Binding("fill", "color")),
            $(go.TextBlock,
              { margin: 8 },
              new go.Binding("text", "key"))
          );

        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" }
          ]);

        return myDiagram.makeImageData();
      });

      // Output the GoJS makeImageData as a .png:
      const { buffer } = parseDataUrl(imageData);
      fs.writeFileSync('diagram-screenshot.png', buffer, 'base64');

      // Output a page screenshot
      await page.screenshot({ path: 'page-screenshot.png' });
      await browser.close();
    })();

You can also use Puppeteer to fetch live HTML pages and do the same operations:

    // This example loads a web page with a GoJS diagram,
    // then creates a screenshot of the Diagram with makeImageData, plus a screenshot of the page.

    const puppeteer = require('puppeteer');
    const fs = require('fs');

    const parseDataUrl = (dataUrl) => {
      const matches = dataUrl.match(/^data:(.+);base64,(.+)$/);
      if (matches.length !== 3) {
        throw new Error('Could not parse data URL.');
      }
      return { mime: matches[1], buffer: Buffer.from(matches[2], 'base64') };
    };

    (async () => {
      const browser = await puppeteer.launch();
      const page = await browser.newPage();
      // This does not have to be a page on the web, it can be a localhost page, or file://
      await page.goto('https://gojs.net/samples/orgChartEditor.html', {
        waitUntil: 'networkidle2' // ensures images are loaded
      });

      const imageData = await page.evaluate(() => {
        window.myDiagram.animationManager.stopAnimation();
        return window.myDiagram.makeImageData({
          background: window.myDiagram.div.style.backgroundColor
        });
      });

      // Output the GoJS makeImageData as a .png:
      const { buffer } = parseDataUrl(imageData);
      fs.writeFileSync('diagram-screenshot.png', buffer, 'base64');

      // Output a page screenshot
      await page.screenshot({ path: 'page-screenshot.png' });
      await browser.close();
    })();