Image Export Demo

This demo shows how to export the whole diagram or a part of it to a PNG image.

Things to Try

• Press Export and export the graph as PNG image.
• Enable Export Rectangle Contents to export only the rectangle's region instead of whole graph. Resize and move rectangle to control the region which will be exported.
• Explore the settings for scale and margin.
• Try to export the image using a Node.js server.

Details

The demo shows an approach that completely runs in the client's browser, as well as an approach for a server-side export. The client-side export is supported by the latest versions of all major browsers.

Server-side export

The server-side export is a minimal example of how to export the graph using an external service hosted on a server. It shows the export via a Node.js express server using headless Chrome/Puppeteer.

The server-side export button will be enabled, when the Node.js server is alive on loading time of the demo. To run the server, see the respective readme in ./node-server/. Note that this only works locally from your package, for the online version this functionality is disabled.