styling-elements.md

Styling elements

By default, all model elements are rendered as grey boxes, as illustrated by the example diagram below.

However, the following characteristics of the elements can be customized:

• Width (pixels)
• Height (pixels)
• Background colour (HTML hex value)
• Text colour (HTML hex value)
• Font size (pixels)
• Shape (see the Shape enum)
• Border (Solid or Dashed; see the Border enum)
• Opacity (an integer between 0 and 100)

Tagging elements

All elements 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 Java client library adds the following tags to elements.

Element	Tags
Software System	"Element", "Software System"
Person	"Element", "Person"
Container	"Element", "Container"
Component	"Element", "Component"

All of these tags are defined as constants in the Tags class. As we'll see shortly, you can also add your own custom tags to elements using the AddTags() method on the element.

Colour

To style an element, simply create an ElementStyle for a particular tag and specify the characteristics that you would like to change. For example, you can change the colour of all elements as follows.

Styles styles = workspace.Views.Configuration.Styles;
styles.Add(new ElementStyle(Tags.Element) { Background = "#438dd5", Color = "#ffffff" });

You can also change the colour of specific elements, for example based upon their type, as follows.

styles.Add(new ElementStyle(Tags.Element) { Color = "#ffffff" });
styles.Add(new ElementStyle(Tags.Person) { Background = "#08427b" });
styles.Add(new ElementStyle(Tags.Container) { Background = "#438dd5" });

If you're looking for a colour scheme for your diagrams, try the Adobe Color Wheel or Paletton.

Shapes

You can also style elements using different shapes as follows.

styles.Add(new ElementStyle(Tags.Element) { Color = "#ffffff" });
styles.Add(new ElementStyle(Tags.Person) { Background = "#08427b" , Shape = Shape.Person });
styles.Add(new ElementStyle(Tags.Container) { Background = "#438dd5" });
database.AddTags("Database");
styles.Add(new ElementStyle("Database") { Shape = Shape.Cylinder });

As with CSS, styles cascade according to the order in which they are added. In the example above, the database element is coloured using the "Container" style, the shape of which is overriden by the "Database" style.

The set of available shapes is as follows:

Diagram key

Structurizr will automatically add all element styles to a diagram key, showing you which styles are associated with which tags.

You can find the code for this example at StylingElements.cs and the live example workspace at https://structurizr.com/share/36111.