Styling

LikeC4 provides advanced customization capabilities. You can change colors, shapes, sizes, 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 or deployment
• 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 // has '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.
Element styles override ones from the kind:

specification {
  element actor {
    style {
      shape person
      color red
    }
  }
}

model {
  customer = actor 'Customer' {
    style {
      // inherits shape and overrides color
      color green
    }
  }
}

Per view

Next section clarifies how to customize elements per view.

Style properties

Shape

specification {
  element actor {
    style {
      shape person
    }
  }
}

Available shapes: rectangle (default), storage, cylinder, browser, mobile, person, queue.

Color

specification {
  element actor {
    style {
      color red
    }
  }
}

Available colors: primary (default), secondary, muted, amber, gray, green, indigo, red.

Tip

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: dashed (default), dotted, 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
    }
  }
}

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
}

Aliased icons

With @ prefix, you can use aliased folders (learn more in configuration):

model {
  pg = service 'PostgreSQL' {
    style {
      // local images, based on aliased folders
      icon @/postgresql.svg
    }
  }
}

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

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

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

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

Styles customization

How to override default styles is explained in project configuration

Project configuration Learn how to customize styles in your project