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
orfalse
).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).
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>