Skip to main content
  1. Index

Using GoJS with Node.js

As of 2.0, GoJS can be used in DOM-less contexts like Node.js. However there are some considerations:

  • Since there is no Diagram DIV, you must instead set the Diagram.viewSize property. This affects all the same values as the DIV size, like Diagram.position and layout results from layouts that are viewport-sized.
  • Cannot measure go.Pictures, you must set a GraphObject.desiredSize instead.
  • Cannot measure go.TextBlocks accurately, you should set a GraphObject.desiredSize instead.

For server-side operations that need to measure Pictures or TextBlocks, you should consider using a headless browser with Node. Click here for examples using Node with Puppeteer (headless Chrome).

Node.js example

If you saved the following JavaScript as nodescript.js and run it with node (node nodescript.js), it will output Model JSON results in the console, which include the locations of laid-out Nodes. You can use Node.js in this way to do server-side operations like large layouts, and then send the JSON to the client.

js

Alternatively, if your code is saved as nodescript.mjs or your project is of "type": "module", you can use GoJS as an ECMAScript module:

js

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.

js

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

js