Styling

You can change colors, shapes, and icons of elements and relationships.

Element

There are multiple ways to style elements:

• Style all elements of a kind in specification
• Specific for an element in model
• Override styles in view

Elements of a kind

To style all elements of a kind, use the style block in specification:

specification {
  element user {
    style {
      // every element of 'user' kind
      shape person // have 'person' shape
      color amber  // and amber color
    }
  }
 
  element frontend {    
    style {
      // every 'frontend' displayed as browser
      shape: browser // ':' is optional, but if you prefer
    }
  }
}

Single element

To style a specific element, use the nested style block in model.
Element styles override the kind ones:

specification {
  element actor {
    style {
      shape person
      color red
    }
  }
}
 
model {
  customer = actor 'Customer' {
    style {
      // inherits shape from kind
      // and overrides color
      color green                   
    }
  }
}

Override for a View

You can override styles inside the view definitions.
For example, change the color:

view {
  include *
 
  style customer {
    color muted
  }
}

Style properties

Every style block may contain the following properties:

• shape
• color
• icon

Shape

Available element shapes:

If not set, the default shape is rectangle.

Color

If not set, the default color is primary.

Icon

Element may have an icon - any browser-supported image and publicly available with https://:

model {
  k8s = service 'K8s Service' {
    style {
      icon https://icons.terrastruct.com/azure%2F_Companies%2FKubernetes.svg
    }
  }
}

Check these icons:

• icons.terrastruct.com (opens in a new tab)

Relationship

Relationships can be styled using the kinds:

specification {
  relationship async {
    color amber
    line dotted
    head diamond
    tail vee
  }
}

At the moment, the styling applies globally and cannot be overridden per view.
Let us know and open an issue (opens in a new tab) if you need it.

Line

By default, the line is dashed.

Arrow type

The arrow type can be set for the head and the tail of the relationship:

By default, the head is normal and the tail is none.

onormal means "outlined normal", i.e. no fill
odiamond - "outlined diamond"

Refer to Graphviz arrowType (opens in a new tab) for visuals.