The recommended way to embed diagrams in documentation is to use the interactive iframe embed, although HTML is often not permitted in all wikis that use Markdown or AsciiDoc, for example. For this reason, Structurizr also provides a way to "publish" all of the diagrams in your workspace to a PNG format, which can then be included in your documentation using regular image tags.
Interactive iframe embed
Static PNG embed
This feature is only available for:
- Public workspaces.
- Private workspaces with the sharing link enabled.
Please note that this feature is not available for client-side encrypted workspaces, because we are unable to view your diagrams, and convert them to PNG files.
Viewing/deleting published images
Click the " Published images" link on the workspace summary page to see the images have been published (and are available to embed) from that workspace. To delete all published images, click the button on this page.
Changing the workspace visibility (public/private) or enabling/disabling the sharing link will automatically delete any published images.
Publishing PNG images
There are a number of ways that the PNG versions of your diagrams can be published.
PNG images for cloud service workspaces are published by a scheduled job running every 10-15 minutes that checks for recently updated workspaces. To force your diagrams to be published by the next scheduled job, you can push a new version of your workspace or make a change and save your workspace. Images will not be immediately available, but they should appear within 15-30 minutes.
Please note that the on-premises installation does not have the ability to automatically publish PNG versions of your diagrams. If you would like to do this, you will need to install Puppeteer and headless Chrome to publish the diagrams on a scheduled basis. Here's an example script that you can use as a starting point.
PNG images can be manually published at any time, for both the cloud service and on-premises installation.
To do this, click the (PNG export) button in the diagram editor,
and then click the button.
If you don't see the button, please check that you are looking at the diagram editor (the URL will end with
/diagram-editor), rather than the diagram viewer.