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
- size - padding - textSize - icon
- opacity
- border - multiple

Shape

Available element shapes:

shape	example
rectangle	check 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.

It’s also possible to use custom colors defined in specification.

Size

Size of an element is controlled by following properties:

property	explanation
size	size of the shape
padding	space around element’s title
textSize	font size of element’s title

Every property accepts: xsmall, small, medium, large, xlarge
(or short xs, sm, md, lg, xl).
Default size is medium.

When shape size is xsmall, only element’s title is displayed.

specification {
  element element {
    style {
      size large
      textSize xl
    }
  }
}

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

Supported values: dotted, dashed, solid, none

Multiple

To display element as multiple instances, set multiple to true:

specification {
  element element {
    style {
      multiple true
    }
  }
}

Icon

Elements may have an icon - any browser-supported image (png, svg, webp, etc.):

model {
  pg = service 'PostgreSQL' {
    style {
      // Publicly available with `https://`
      icon https://icons.terrastruct.com/dev%2Fpostgresql.svg

      // or local image, relative to current file
      icon ../postgresql.svg

      size sm
      textSize lg
    }
  }
}

Tip

icon can be defined as a property and skip style block

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

Tip

Use none to unset icon

pg = service 'PostgreSQL' {
  icon none
}

Bundled icons

LikeC4 includes a set of icons from these packs:

• aws: from aws-icons.com
• azure: from microsoft.com
• gcp: from gcpicons.com
• tech: from techicons.dev

Example:

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

Tip

Use VSCode code completion to explore available icons.

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

line	example
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:

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