Diagrams in your workspaces can be embedded on web pages as a PNG image. Unlike the iframe embed, this allows static images to be embedded in places where HTML is not permitted, such as wikis that use Markdown or AsciiDoc.
When viewing a diagram, click the button to display the image URL for that diagram.
Generating PNG files
There are a couple of ways that the PNG versions of your diagrams can be generated.
Manual generation (cloud service and on-premises installation)
Static PNG files can be manually generated at any time, for both the cloud service and on-premises installation. To do this, click the button when viewing a diagram in edit mode, and then click the button.
Automatically (cloud service)
Images are created by a scheduled job running every few minutes that checks for recently updated workspaces. For this reason, images may not be immediately available.
Automatically (on-premises installation)
The on-premises installation does not have the ability to automatically generate 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.
This is an image embed of a diagram in a public workspace.
<img src="https://structurizr.com/share/36915/images/SystemContext.png" alt="Image embed from a public workspace" class="img-thumbnail" />
Embedding private diagrams requires your workspace sharing token to be included on the web page, so therefore it's recommended that you only use this feature on internal web pages (i.e. within your organisation's network, etc).
<img src="https://structurizr.com/share/36916/9bb891a2-327e-4222-b121-0f41d1e82f62/images/SystemContext.png" alt="Image embed from a public workspace" class="img-thumbnail" />