Single HTML page export, for offline use

Diagrams and documentation can be exported to a single responsive HTML page for offline use. When viewing diagrams or documentation, click the button to begin the export.

This feature will not work if popups are blocked, so please ensure that popups are allowed for *.structurizr.com in your web browser.

Not available with the free version

Diagrams

The diagram export feature will create a single HTML page that includes all diagrams and diagram keys, with a diagram selector control at the top of the page to navigate the diagrams. Zooming in and opening URLs by double clicking is supported, and you can also use the Left and Right cursor keys to move between diagrams (example).

Diagrams export


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 while holding down the Alt key in the diagram editor/viewer.
  • 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.

Documentation

The documentation export feature is only available when a software system is selected in the navigation control, and it will create a single HTML page that includes all sections for that software system. (example).

Documentation export