Embedding public diagrams

Diagrams in public workspaces can be embedded on web pages. When viewing a diagram, click the button to display the embed code for that set of diagrams. Diagrams can be embedded at a fixed size or responsive.

Team Plan customers can also embed private and Express diagrams.

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.

<iframe src="https://structurizr.com/embed/13701?diagram=context&diagramSelector=false" width="600" height="423" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>

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 query string parameter. The JavaScript postMessage() API is used to send information about the height of the iframe content back to the parent HTML page.

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

Diagram selector

The diagram selector control can be included by setting the diagramSelector parameter to true. If using a fixed size embed, you'll need to increase the height of the iframe by 55 pixels. The diagram selector works best when all diagrams in a workspace use the same page size.

Embedding a specific diagram

Specific diagrams can be selected by modifying the value of the diagram parameter in the URL to be the key of the diagram. For example, specifying diagram=containers embeds the diagram with the key containers in the workspace.