Embedding Structurizr Express diagrams

Customers on the Team Plan can embed Structurizr Express diagrams. When viewing a diagram, click the button to display the embed code for that diagram.

Embedding a Structurizr Express diagram requires a "Structurizr Express key", which is shown on your dashboard. Since this key is connected to your user account, your embedded Structurizr Express diagram will be able to make use of paid features.

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://localhost:8443/embed/express" style="display: none;">
<input name="key" value="your Express key"/>
<textarea name="definition" style="display: none;">
Person = User | A user of my software system. | | 277,674
SoftwareSystem = Software System | My software system. | | 1552,674

Relationship = User | Uses | | Software System | |

Diagram = System Context | Software System | A5_Landscape

ElementStyle = Element         |  650 |  400 |         |         |  36 |
ElementStyle = Software System |      |      | #a4b7c9 | #000000 |     |
ElementStyle = Person          |      |      | #728da5 | #ffffff |     |

RelationshipStyle = Relationship |  5 |         |       | Direct     |  36 |  400 |
</textarea>
<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>

Alternatively, you can embed a diagram based upon an external diagram definition using the src parameter.

<form id="myEmbeddedDiagramForm" target="myEmbeddedDiagram" method="post" action="https://localhost:8443/embed/express" style="display: none;">
<input name="key" value="your Express key"/>
<input name="src" value="https://gist.githubusercontent.com/simonbrowndotje/ee1c266dfd123a4d5660a8aa19da9e61/raw/7f4b894968dbe1c5725a7f71d29bdc9d507ae6d2/gistfile1.txt" />
<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>