PDF Export Demo

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

Things to Try

• Press Export and export the graph as PDF 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 page size, scale, and margin. Note that the scale option only has an effect if page size is set to Automatic.
• Try to export the image using a Node.js server.

Details

The demo shows two approaches, one that completely runs in the client's browser and a server-side export. The client-side export uses the open source svg2pdf and jsPDF libraries, to which we contributed major improvements and bug fixes.

The client-side PDF export also supports custom fonts which is illustrated by the node labels with custom fonts. To make use of custom fonts, they need to be preprocessed and registered at the jsPDF instance.

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 is alive on loading time of the demo. To run the server, see the respective readme in ./node-server/.