Exporting diagrams

Structurizr allows you to export your software architecture diagrams as 300dpi PNG files (which are suitable for using in documents, presentations and printing), SVG, and a single HTML page for offline use.

Automatic downloading will not work if popups are blocked, so please ensure that popups are allowed for *.structurizr.com (or your on-premises/Lite installation) in your web browser.

PNG export

When viewing a diagram, click the button to open the export dialog. From here, you can choose which diagrams to export, whether to include the diagram metadata (title, description, last modified date and branding logo), and whether to crop the resulting image.

SVG export

When viewing a diagram, click the button to open the export dialog.

Building your own offline HTML page

If you'd like to build your own offline HTML page, you can download the interactive versions of the SVG diagrams by:

  • Clicking the button in the diagram editor/viewer, and exporting the "interactive" SVGs.
  • Calling the exportCurrentDiagramToSVG function using the Scripting API, passing a parameter of { interactive: true }.

Interactive elements

The interactive version of the SVG diagrams includes double-click handlers on zoomable elements and/or elements with URLs configured. The double-click handlers call a function named structurizrElementDoubleClicked with the following parameters:

  • event: the MouseEvent representing the double-click.
  • viewKey: the key of the view that should be shown next (i.e. when zooming from a software system to its containers), or undefined if there is no view to zoom into.
  • url: the element's URL, or undefined if the element doesn't have a URL set.

Interactive relationships

Similarly, the interactive version of the SVG diagrams includes double-click handlers on relationships with URLs configured. The double-click handlers call a function named structurizrRelationshipDoubleClicked with the following parameters:

  • event: the MouseEvent representing the double-click.
  • url: the relationships's URL.

Once an interactive SVG export is included in your HTML page, you will need to provide your own implementation of the structurizrElementDoubleClicked and structurizrRelationshipDoubleClicked functions.

Automating the diagram exports

Diagrams are rendered client-side (i.e. in your web browser), so an automated export is only possible using a web browser in conjunction with an automation framework, for example headless Chrome and Puppeteer. See Help - Scripting API for more details.