Structurizr supports the concept of themes, so that you can consistently style diagrams across workspaces. Themes are JSON files containing element and relationship styles; the same ones that you would usually define in a workspace. 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 via the browser-based workspace editor (Configuration tab).
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.