Embedding private diagrams

Diagrams in private workspaces owned by users on the Team Plan can be embedded on web pages. For example, a team might have a development wiki that they would like to embed the software architecture diagrams into. Embedding private diagrams requires your API key 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).

As with embedding public diagrams, the diagram selector control can be included and specific diagrams can be embedded.

Fixed size embed

This is a simple fixed size embed. The width and height of the iframe can be varied if you keep the ratio between them the same.

<form id="myEmbeddedDiagramForm" target="myEmbeddedDiagram" method="post" action="https://structurizr.com/embed/1" style="display: none;">
    <input name="apiKey" value="your workspace API key" />
    <input name="diagram" value="context" />
    <input name="diagramSelector" value="false" />
</form>

<iframe name="myEmbeddedDiagram" width="600" height="850" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>

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

Responsive embed

This is a responsive embed, where the height of the iframe is set automatically, based upon the width. The iframe needs to be given a unique ID on your page, and that ID needs to be specified using the iframe form parameter. The JavaScript postMessage() API is used to send information about the height of the iframe content back to the parent HTML page.

<form id="myEmbeddedDiagramForm" target="myEmbeddedDiagram" method="post" action="https://structurizr.com/embed/1" style="display: none;">
    <input name="apiKey" value="your workspace API key" />
    <input name="diagram" value="context" />
    <input name="diagramSelector" value="false" />
    <input name="iframe" value="myEmbeddedDiagram" />
</form>

<iframe id="myEmbeddedDiagram" name="myEmbeddedDiagram" width="100%" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>

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

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