Image embed

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.

Please note that this feature is not available for private workspaces or client-side encrypted workspaces.

Paid subscriptions only

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.

Public workspaces

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" />

Image embed from a public workspace

Private workspaces

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" />

Image embed from a private workspace