IT Products

Here is the diagram key/legend, based upon the tags and styles defined in the workspace, and the theme(s) in use.

1. Atlassian Confluence macros

Please see Atlassian Confluence for details of the pre-built macros.

2. Responsive HTML iframe embed

This allows you to embed the live software architecture diagrams using a responsive iframe. See iframe embed for more details.

<iframe id="myEmbeddedDiagram" src="http://localhost:9170/embed/1?diagram=&diagramSelector=false&iframe=myEmbeddedDiagram" width="100%" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>

<script type="text/javascript" src="http://localhost:9170/static/js/structurizr-embed.js"></script>

<form id="myEmbeddedDiagramForm" target="myEmbeddedDiagram" method="post" action="http://localhost:9170/embed/1" 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="http://localhost:9170/static/js/structurizr-embed.js"></script>

3. Static PNG 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.

This is the diagram editor, where you can view all of the diagrams that exist in the workspace, and modify the layout of those diagrams. When you're finished, click Save workspace to save the diagram layout.

Elements

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 editor and Keyboard shortcuts for more information.

•   Undo.
•   Align selected elements left, centre or right.
•   Align selected elements top, middle or bottom.
•   Distribute selected elements horizontally or vertically.

Relationships

By default, all relationships are rendered as straight lines. You can introduce vertices into a line by clicking it. With the mouse pointer hovering over a line, you can use the Up and Down cursor keys to move the label between the start and end of the line. The r key can be used to change the routing algorithm used to render the line too. See Diagram editor for more information.

Navigation

To switch between diagrams, you can either use the diagram selector dropdown control at the top of the page, or use the Left and Right cursor keys when no elements are selected. If elements have a + or # symbol on them, you can double-click the element to navigate to another diagram, or an arbitrary URL. See Diagram navigation for more information.

The perspectives included in the software architecture model are listed below. Viewing a diagram with a particular perspective will highlight all elements and relationships that have content for that perspective. See Help - Diagrams - Perspectives for more details.