Notation

Unlike formal diagramming notations, Structurizr purposely uses a very simple and constrained notation consisting of boxes and uni-directional arrows, some aspects of which can be customised via a set of element and relationship styles. Any styles that you use are shown on an automatically generated diagram key.

While viewing a diagram, click the button to show the diagram key.

Elements

The basic properties of an element are rendered as follows.

Person

Person

A person has a name and description.

Software System

Software System

A software system has a name and description.

Container

Container

A container has a name, description and technology.

Component

Component

A component has a name, description and technology.

Although the notation is relatively constrained, the following aspects can be changed.

  • Shape (default="Box")
  • Icon (a data URI representing a base64 encoded PNG/JPG file, or a HTTPS URL to a PNG/JPG file ... SVG icons are not supported)
  • Width (pixels; default=450)
  • Height (pixels; default=300)
  • Background colour (HTML hex value; default="#dddddd")
  • Stroke color (HTML hex value)
  • Stroke width (pixels, 1-10; default=2)
  • Text colour (HTML hex value; default="#000000")
  • Font size (pixels; default=24)
  • Border ("Solid", "Dashed", or "Dotted"; default="Solid")
  • Opacity (an integer between 0 and 100; default=100)
  • Metadata (true or false, to show or hide the metadata)
  • Description (true or false, to show or hide the description)

Shape, Width, Height, Background, Border, and Description are not applicable for deployment nodes.

Relationships

A relationship between two elements is illustrated by unidirectional (one-way) arrow as follows.

Relationshp without technology
Relationshp with technology

Again, some aspects of this notation can be changed.

  • Line thickness (pixels; default=2)
  • Colour (HTML hex value; default="#707070")
  • Dashed (default=true)
  • Routing ("Direct", "Curved", or "Orthogonal"; default="Direct")
  • Font size (pixels; default=24)
  • Width (of the description block, in pixels; default=200)
  • Position (of the description along the line, as a percentage from start to end; default=50)
  • Opacity (an integer between 0 and 100; default=100)

Tags and styles

All elements and relationships within a software architecture model can have one or more tags associated with them. A tag is simply a free-format string. By default, the following tags are associated with elements and relationships.

  • Person: Element and Person
  • Software System: Element and Software System
  • Container: Element and Container
  • Component: Element and Component
  • Deployment Node: Element and Deployment Node
  • Infrastructure Node: Element and Infrastructure Node
  • Software System Instance: Software System Instance
  • Container Instance: Container Instance
  • Relationship: Relationship

These default tags cannot be removed, but additional tags can be associated with any element (except groups) or relationship.

Element and relationship styles are associated with a single tag. For example, to render all people as "Person" shapes on the diagrams, you need to create an element style for the Person tag, and specify a shape of Person.

As with CSS, styles cascade according to the order in which they are added. For example, you could create an element style for the Element tag, in which you specify some defaults, and then create another element style for the Software System tag to override one or more of those defaults.

Boundaries and groups

A number of diagram types may include boundaries to group elements, as follows:

  • System landscape diagram: enterprise boundary plus software system groups
  • System context diagram: enterprise boundary plus software system groups
  • Container diagram: software system boundaries plus container groups
  • Component diagram: container boundaries plus component groups
  • Dynamic diagram: Enterprise/software system/container boundaries plus groups, based upon the diagram scope

The following styles are applied to these boundaries by default:

  • Enterprise boundary: dark grey (#444444)
  • Group: light grey (#cccccc)
  • Software system boundary: the border colour (stroke colour) of the software system
  • Container boundary: the border colour (stroke colour) of the container

Boundaries can be customised with element styles and the following tags, overriding the text colour and icon as needed:

  • Boundary: all enterprise/software system/container boundaries
  • Boundary:Enterprise: the enterprise boundary only
  • Boundary:SoftwareSystem: all software system boundaries
  • Boundary:Container: all container boundaries
  • Group: all groups
  • Group:Name: the named group only

Examples

The following examples have been styled in different ways.

An example diagram

An example diagram key

An example diagram

An example diagram key