Embedding Structurizr Express diagrams

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

This is a responsive iframe 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.

Inline diagram definition

The diagram definition can be included inline as follows.

<form id="myEmbeddedDiagramForm" target="myEmbeddedDiagram" method="post" action="https://structurizr.com/embed/express" style="display: none;">
<textarea name="definition" style="display: none;">
{
    "type": "System Context",
    "scope": "Internet Banking System",
    "description": "The system context diagram for the Internet Banking System.",
    "size": "A5_Landscape",


    "elements": [
      {
        "type": "Person",
        "name": "Customer",
        "description": "A customer of the bank.",
        "tags": "",
        "position": "1040,97"
      },
      {
        "type": "Software System",
        "name": "Internet Banking System",
        "description": "Allows customers to view information about their bank accounts and make payments.",
        "tags": "Internal",
        "position": "1015,725",
        "containers": []
      },
      {
        "type": "Software System",
        "name": "Mainframe Banking System",
        "description": "Stores all of the core banking information about customers, accounts, transactions, etc.",
        "tags": "Internal",
        "position": "1015,1230",
        "containers": []
      }
    ],


    "relationships": [
      {
        "source": "Customer",
        "description": "Uses",
        "technology": "",
        "destination": "Internet Banking System",
        "tags": ""
      },
      {
        "source": "Internet Banking System",
        "description": "Uses",
        "technology": "",
        "destination": "Mainframe Banking System",
        "tags": ""
      }
    ],


    "styles": [
      {
        "type": "element",
        "tag": "Software System",
        "width": "",
        "height": "",
        "background": "#1168bd",
        "color": "#ffffff",
        "fontSize": "",
        "border": "",
        "opacity": "",
        "shape": ""
      },
      {
        "type": "element",
        "tag": "Person",
        "width": "",
        "height": "",
        "background": "#08427b",
        "color": "#ffffff",
        "fontSize": "",
        "border": "",
        "opacity": "",
        "shape": "Person"
      }
    ]
  }
</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>

External diagram definition

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://structurizr.com/embed/express" style="display: none;">
<input name="src" value="https://gist.githubusercontent.com/simonbrowndotje/ef5a7aa446ebbd9f4104241e88b4cdd8/raw/06db0d2fd481b091dc40d231900027f501b82519/structurizr-express-example.json" />
<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>