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:

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:

  1. Publish the JSON file representing the theme somewhere that is accessible from your web browser (e.g. a web server, GitHub Gist, etc.
  2. 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:

  1. 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).
  2. 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.