Level 1: System Context diagram
|
Level 2: Container diagram
|
Level 3: Component diagram
|
Level 4: Code diagram
System Landscape diagram
|
Dynamic diagram
|
Deployment diagram
Diagrams
Structurizr allows you to create a number of different diagram types, focused around static structure at different levels of detail, dynamic behaviour and deployment.
Features
While viewing a diagram, you can:
- Edit the diagram layout with the diagram editor.
- Open the diagram key/legend, which is automatically generated for you.
- Toggle tooltips, to show you additional information about the element or relationship under the mouse pointer (add a view/viewset property of
structurizr.tooltips=true
to automatically enable tooltips for a specific view). - Filter the diagram by tag.
- Toggle perspectives.
- Start presentation mode.
- Get the HTML code to embed the diagram in web pages, wiki pages, etc.
- Export the diagram and key/legend to PNG (suitable for printing, inserting into slides, etc).
- Export the diagram and key/legend to SVG.
- Export all diagrams to a single HTML page, for offline use.
- Create a diagram review.
Navigation
A collection of diagrams can be navigated in a number of ways:
- Select a diagram from the thumbnails on the left of the page.
- Press the
Up
/Down
orLeft
/Right
cursor keys to move to the previous/next diagram. - Double-click on an element with a
+
symbol to open the first diagram at the next level of detail (e.g. a container diagram for a software system). - Double-click on an element with a
#
symbol to open the URL associated that element/relationship. - Press the
Space
key to open the quick navigation dialog; use theUp
/Down
cursor keys to select a diagram, or start typing to find a specific diagram. Press theEnter
key to navigate to the selected diagram.
This is a live embedded diagram showing the system landscape from the "Big Bank plc - System Landscape" workspace. Double-click the "Internet Banking System" and you'll be taken to the workspace/diagrams for the "Internet Banking System".
And this embed allows you to view all diagrams from the "Big Bank plc - Internet Banking System" workspace. Double-click the "Internet Banking System" and you'll be taken to its container diagram. Alternatively, you can change diagrams using the dropdown list at the top of the embed.
Diagram sorting
By default, diagrams are first sorted by scope (unscoped, followed by software systems by name), and then by diagram type, as follows:
- Unscoped diagrams
- System landscape diagrams
- Dynamic diagrams
- Deployment diagrams
- Software system 1
- System context diagrams
- Container context diagrams
- Component context diagrams
- Dynamic diagrams
- Deployment diagrams
- Software system 2
- System context diagrams
- Container context diagrams
- Component context diagrams
- Dynamic diagrams
- Deployment diagrams
- etc
A viewset property can be used to change the sort order:
structurizr.sort=key
: sort by view keystructurizr.sort=type
: sort by view type (e.g. keep all system context views together)structurizr.sort=created
: sort by creation order (e.g. the order in which views are defined in your DSL)
For example, with the DSL:
workspace {
model {
...
}
views {
properties {
"structurizr.sort" "created"
}
}
}