iframe embed

Diagrams in your workspaces can be embedded on web pages, using a HTML iframe. For example, a team might have a development wiki that they would like to embed the software architecture diagrams into. This allows you to embed the "live" diagram, which means that you can view the diagram key, use the fullscreen view, and navigate the workspace.

When viewing a diagram, click the button to display the embed code for that set of diagrams.

Public workspaces

This is a responsive embed of a diagram in a public workspace, where the height of the iframe is set automatically, based upon the width of the diagram.

<iframe id="publicEmbedExample" src="https://structurizr.com/embed/36915?diagram=SystemContext&diagramSelector=false&iframe=publicEmbedExample" width="100%" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>
<script type="text/javascript" src="https://static.structurizr.com/js/structurizr-embed.js"></script>

Parameters

The iframe embed URL takes the following parameters:

diagram: The key of the diagram to embed.
diagramSelector: Include the diagram selector control (true or false).
iframe: The ID of the iframe containing the embedded diagram. The JavaScript postMessage() API is used to send information about the height of the iframe content back to the parent HTML page, so that the iframe can be resized as needed. The iframe ID must be unique on the page.

Private workspaces

Embedding private diagrams requires your API key or 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).

Putting your API key or sharing token on a public web page will mean that anybody can access your software architecture diagrams.

There are two ways that you can embed a private diagram.

GET request

If your workspace has the sharing link enabled, you can use embed code like the following.

<iframe id="privateEmbedExample1" src="https://structurizr.com/embed/36916/9bb891a2-327e-4222-b121-0f41d1e82f62?diagram=SystemContext&diagramSelector=false&iframe=privateEmbedExample1" width="100%" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>
<script type="text/javascript" src="https://static.structurizr.com/js/structurizr-embed.js"></script>

POST request

The other approach is to use a HTML form to initiate a POST request to the embed URL. This approach uses your workspace API key rather than the sharing token.

<form id="privateEmbedExampleForm" target="privateEmbedExample2" method="post" action="https://structurizr.com/embed/36916" style="display: none;">
    <input name="apiKey" value="c74ee0cc-6ebf-4a72-bc03-68ed69d36441"/>
    <input name="diagram" value="SystemContext" />
    <input name="diagramSelector" value="false" />
    <input name="iframe" value="privateEmbedExample2" />
</form>

<iframe id="privateEmbedExample2" name="privateEmbedExample2" width="100%" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" allowfullscreen="true" class="thumbnail structurizrEmbed"></iframe>

<script type="text/javascript">
    document.getElementById('privateEmbedExampleForm').submit();
</script>

<script type="text/javascript" src="https://static.structurizr.com/js/structurizr-embed.js"></script>