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:
Creating your own themes
There are two ways to create/use your own themes, statically as external resources, and dynamically from any workspace that you have access to.
1. Static themes
A static theme is a JSON file that is hosted externally to Structurizr, and linked from the workspace via a URL. Theme files can be created by hand, exported from an existing workspace, or created with one of the client libraries.
For example, when viewing a diagram, use the button to export the styles from that workspace as a theme.
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 - example).
- Specify the URL(s) of the JSON file using the client library (ViewSet -> Configuration -> themes property), or via the browser-based workspace editor (Configuration tab).
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 workspace that you have access too.
To use a dynamic theme:
- Get the URL of the theme by clicking the link on the private/public/shareable workspace summary page as appropriate (e.g. https://structurizr.com/share/36141/theme).
- Specify this URL using the client library (ViewSet -> Configuration -> themes property) or DSL (
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.