Getting Started
This is a model of my software system.
Load workspace
Use the button (above) or drag a file containing a JSON workspace definition here to load it into Structurizr.
This imports the workspace into your web browser only, nothing is uploaded to our servers. See Local storage for more details.
Diagram key
Embedding diagrams
Atlassian Confluence macros
Please see Atlassian Confluence for details of the pre-built macros.
Responsive iframe embed
This allows you you embed the live software architecture diagrams using a responsive iframe embed, which will automatically resize the diagram based upon the size of the containing element. See iframe embed for more details.
<iframe id="myEmbeddedDiagram" src="https://structurizr.com/embed/25441?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>Responsive iframe embed
This allows you you embed the live software architecture diagrams using a responsive iframe embed, which will automatically resize the diagram based upon the size of the containing element. See iframe embed for more details.
<form id="myEmbeddedDiagramForm" target="myEmbeddedDiagram" method="post" action="https://structurizr.com/embed/25441" 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>Static image embed
This allows you to embed a static image using a regular image tag in HTML, Markdown, AsciiDoc, etc. See Image embed for more details.
https://structurizr.com/share/25441/images/.png
https://structurizr.com/share/25441/images/-key.pngWorkspace
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
Export to PNG
Export your diagram(s) as 300dpi PNG files, suitable for including in documentation, presentations, etc.
Diagrams
File name
Diagram
Client-side encrypted workspace
The workspace "" has been client-side encrypted, please enter the passphrase to decrypt it.