Themes
Structurizr supports the concept of themes, so that you can consistently style diagrams across workspaces. Themes are JSON files containing tag-based element and relationship styles; the same ones that you would usually define in a workspace - see Help - Notation for more details. When one or more themes are set on a workspace, any styles defined in those themes will be used as a basis when rendering diagrams. Furthermore, like CSS, any styles additionally defined in the workspace will override those defined in the themes.
The following prebuilt themes are available to use:
- Amazon Web Services (2023.01.31) - icons and colours | icons only
- Amazon Web Services (2022.04.30) - icons and colours | icons only
- Amazon Web Services (2020.04.30) - icons and colours | icons only
- Google Cloud Platform (v1.5) - icons and colours | icons only
- Kubernetes (v0.3) - icons and colours | icons only
- Microsoft Azure (2023.01.24) - icons and colours | icons only
- Microsoft Azure (2021.01.26 - "V4") - icons and colours | icons only
- Microsoft Azure (2020.07.13 - "V3") - icons and colours | icons only
- Microsoft Azure (2019.09.11) - icons and colours | icons only
- Oracle Cloud Infrastructure (2023.04.01) - icons and colours | icons only
- Oracle Cloud Infrastructure (2021.04.30) - icons and colours | icons only
- Oracle Cloud Infrastructure (2020.04.30) - icons and colours | icons only
Creating your own themes
1. Static themes
A static theme is a JSON file that is hosted externally to Structurizr, via a URL. Theme files can be created by hand, exported from an existing workspace, or created with one of the client libraries. An easy way to create a theme is to define a workspace via the Structurizr DSL, and export the styles as a theme via the Structurizr CLI. For example:
./structurizr.sh export -workspace theme.dsl -format theme
theme.dsl
workspace "Name" "Description" { views { styles { element "Person" { shape person } } } }
theme.json (output)
{ "name" : "Name", "description" : "Description", "elements" : [ { "tag" : "Person", "shape" : "Person" } ] }
To use a static theme:
- Publish the JSON file representing the theme somewhere that is accessible from your web browser (e.g. a web server, GitHub Gist, etc.
- Add this URL to your workspace; for example using the Structurizr DSL (theme or themes keywords) or client library (ViewSet -> Configuration -> theme/themes property).
If you are using the cloud service or your on-premises installation is being served over HTTPS, theme JSON files must also be served over HTTPS.
Also, for security reasons, the web server hosting your theme must set the Access-Control-Allow-Origin
header to allow cross-origin requests.
2. Dynamic themes
In contrast, a dynamic theme is directly sourced from another published workspace on the cloud service or on-premises installation that you have access too, and consists of the styles that are explicitly defined in that workspace.
To use a dynamic theme:
- Get the URL of the theme by clicking the "
Theme" link on the private/public/shareable workspace summary page as appropriate (e.g. https://structurizr.com/share/36141/theme).
- Add this URL to your workspace; for example using the Structurizr DSL (theme or themes keywords) or client library (ViewSet -> Configuration -> theme/themes property).
Please note that if other users have access to your workspace, they must also have access to the workspace that is the source of the theme.