Structurizr Express

Structurizr provides an "Express" feature that allows you to create a single diagram without creating and uploading a workspace via the API. This is useful if you need to quickly create a simple software architecture diagram. To use this feature, simply head to Structurizr Express where you'll find a regular diagram editing page along with some controls on the left to define the diagram.

Structurizr Express

type

The following diagram types are supported in Structurizr Express:

  • Enterprise Context
  • System Context
  • Container
  • Component
  • Dynamic

scope

The scope property defines the scope of the diagram, and varies depending on the diagram type.

  • Enterprise Context: The name of the enterprise being described.
  • System Context: The name of a software system defined in the elements array (see below).
  • Container: The name of a software system defined in the elements array (see below).
  • Component: The name of a container defined in the elements array (see below).
  • Dynamic: The name of a software system or container defined in the elements array (see below), or an empty string.

elements

This is an array of the top-level elements (people and software systems) defined in the diagram.

People

The following properties can be specified:

  • type: Must be Person.
  • name: The name of the person/actor/role/persona/etc.
  • description: A short description.
  • tags: A comma separated list of tags.
  • position: The x,y position in pixels of the element on the diagram canvas.

Software Systems

The following properties can be defined specified:

  • type: Must be Software System.
  • name: The name of the software system.
  • description: A short description.
  • tags: A comma separated list of tags.
  • position: The x,y position in pixels of the element on the diagram canvas.
  • containers: An array of containers (see below).

Containers

Containers are defined inside the containers property of the parent software system, and the following properties can be specified:

  • type: Must be Container.
  • name: The name of the container.
  • description: A short description.
  • technology: The technology of the container.
  • tags: A comma separated list of tags.
  • position: The x,y position in pixels of the element on the diagram canvas.
  • components: An array of components (see below).

Components

Components are defined inside the components property of the parent container, and the following properties can be specified:

  • type: Must be Component.
  • name: The name of the component.
  • description: A short description.
  • technology: The technology of the component.
  • tags: A comma separated list of tags.
  • position: The x,y position in pixels of the element on the diagram canvas.

relationships

This is an array of the relationships between elements. The following properties can be specified:

  • source: The name of the source element.
  • description: A short description.
  • technology: The technology used to implement the relationship.
  • destination: The name of the destination element.
  • tags: A comma separated list of tags.
  • vertices: An array of x,y coordinates used to bend the line. (optional)
  • order: The order of the interaction. (dynamic diagrams only)

styles

This is an array of the styles that are applied to elements and relationships, based upon the tags that they have.

Element styles

The following properties can be specified for element styles:

  • type: Must be element.
  • tag: The tag that this style applies to.
  • width: The width in pixels.
  • height: The height in pixels.
  • background: The background color as an RGB hex value (e.g. #ffffff).
  • color: The foreground color as an RGB hex value (e.g. #000000).
  • fontSize: The font size in pixels.
  • border: Solid or Dashed.
  • opacity: The opacity of the rendered element as a percentage (an integer between 0 and 100, inclusive).
  • shape: The shape to use (Box, RoundedBox, Circle, Ellipse, Hexagon, Person, Folder, Cylinder, Pipe).

Relationship styles

The following properties can be specified for relationship styles:

  • type: Must be relationship.
  • tag: The tag that this style applies to.
  • position: The position of the description along the line as a percentage from start to end (an integer between 0 and 100, inclusive).
  • thickness: The line thickness in pixels.
  • width: The width of the description in pixels.
  • color: The foreground color as an RGB hex value (e.g. #000000).
  • fontSize: The font size in pixels.
  • dashed: Whether the line is dashed or solid (true or false).
  • routing: The algorithm used to route lines between elements (Direct or Orthogonal).
  • opacity: The opacity of the rendered element (an integer between 0 and 100, inclusive).

Using external diagram definitions

To use an external diagram definition (e.g. a GitHub gist or a text file accessible from your web browser), simply add a src parameter to the query string. Here is an example using a diagram definition from a GitHub gist.

The content is loaded from your web browser, so you can use URLs that are only accessible inside your internal network as the source of diagram definitions.

You can also use an external diagram definition when embedding Express diagrams. Simply remove the inliine diagram definition from the embed code and replace it with a src parameter instead.

Saving a diagram definition to local storage

The current diagram definition can be saved to your web browser's local storage, which is useful if you need to close your browser and come back to the diagram definition later on. To do this, simply click the button.

Once saved in local storage, you can access the diagram definition by clicking the name of your diagram in the "Express" menu.

Structurizr Express local storage

Additional notes

Please note that all elements on a diagram must be uniquely named.