Skip to content

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 (more on this in next section)

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
}
}
}

Per view

Next section clarifies how to customize elements per view.

Style properties

Every style block may contain the following properties:
- shape
- color
- icon
- opacity
- border

Shape

Available element shapes:

shapeexample
rectanglecheck below
storage..
cylinder(same as storage)
browser..
mobile..
person..
queue..

If not set, the default shape is rectangle.

Color

color
primary, blue
secondary, sky
muted, slate
amber
gray
green
indigo
red

If not set, the default color is primary.

Opacity

If element displayed as a group (like a container), you can set opacity:

specification {
element element {
style {
opacity 10%
}
}
}

Border

If element displayed as a group (like a container), you can change border style:

specification {
element element {
style {
opacity 10%
border dotted // or dashed, solid, none
}
}
}

Icon

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

model {
pg = service 'PostgreSQL' {
style {
icon https://icons.terrastruct.com/dev%2Fpostgresql.svg
color green
}
}
}
model {
pg = service 'PostgreSQL' {
icon https://icons.terrastruct.com/dev%2Fpostgresql.svg
}
}

Bundled icons

LikeC4 includes a set of icons from these packs:

Example:

model {
fn = service 'Lambda Function' {
icon aws:lambda
}
k8s = service 'K8s Service' {
icon gcp:google-kubernetes-engine
}
pg = storage 'PostgreSQL' {
icon tech:postgresql
}
}


Relationship

There are multiple ways to style relationships:

  • Style all relationships of a kind in specification
  • Specific relationship in model
  • Customize per view (explained here)

Relationships of a kind

Relationships can be styled in specification:

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

Specific Relationship

model {
customer -> ui 'opens in browser' {
style {
line solid
color amber
}
}
}

Relationship per view

Next section clarifies how to customize relationships per view.

Relationship properties

Besides the color, relationships may have the following properties:

Line

lineexample
dashed..
solid..
dotted..

By default, the line is dashed.

Arrow type

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

typeexample
normal..
onormal..
diamond..
odiamond..
crow..
vee..
open..
none..

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

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

model {
customer -> ui 'opens in browser' {
style {
head diamond
tail crow
}
}
}

Refer to Graphviz arrowType for visuals.