Big Bank plc
This is an example workspace to illustrate the key features of Structurizr, based around a fictional online banking system.
(this imports the workspace into your web browser only, nothing is uploaded to our servers)
Diagram key
Embedding diagrams
Use the following HTML code to embed this diagram in your web page.
Fixed size embed
<iframe src="https://structurizr.com/embed/36141?diagram=&diagramSelector=false" width="" height="" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>You can vary the width and height if you keep the ratio the same.
Responsive embed
<iframe id="myEmbeddedDiagram" src="https://structurizr.com/embed/36141?diagram=&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>Fixed size embed
<form id="myEmbeddedDiagramForm" target="myEmbeddedDiagram" method="post" action="https://structurizr.com/embed/36141" style="display: none;">
<input name="apiKey" value=""/>
<input name="diagram" value="" />
<input name="diagramSelector" value="false" />
</form>
<iframe id="myEmbeddedDiagram" name="myEmbeddedDiagram" width="" height="" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>
<script type="text/javascript">
document.getElementById('myEmbeddedDiagramForm').submit();
</script>You can vary the width and height if you keep the ratio the same.
Responsive embed
<form id="myEmbeddedDiagramForm" target="myEmbeddedDiagram" method="post" action="https://structurizr.com/embed/36141" style="display: none;">
<input name="apiKey" value=""/>
<input name="diagram" value="" />
<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>Workspace
Welcome to your workspace - here you can view all of the diagrams that exist in the workspace and modify the layout of those diagrams.
By default, all new elements are randomly placed on the diagram canvas.
To organise elements on the diagram canvas, you can either drag them around or
use the various toolbar buttons to align and distribute the elements.
To select multiple elements, hold the Alt or Shift key while clicking an element.
See Diagram layout,
Keyboard shortcuts and
Diagram navigation for more information.
- Undo.
- Align selected elements left, centre or right.
- Align selected elements top, middle or bottom.
- Distribute selected elements horizontally or vertically.
- Save diagram layout.
Once the diagram layout is saved, you can use the "merge workspace" feature of the Structurizr client library to preserve diagram layout when uploading new versions of the workspace.
Please note
Warnings
Client-side encrypted workspace
The workspace "" has been client-side encrypted, please enter the passphrase to decrypt it.