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 workspace, click the button to see the images have been published (and are available to embed) from that workspace.
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 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.
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://static.structurizr.com/workspace/36915/diagrams/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://static.structurizr.com/workspace/36916/9bb891a2-327e-4222-b121-0f41d1e82f62/diagrams/SystemContext.png" alt="Image embed from a public workspace" class="img-thumbnail" />