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

The next section explains how to customize elements per view.

Style properties

Shape

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

Available shapes: rectangle (default), component, storage, cylinder, browser, mobile, person, queue, bucket, and document.

Color

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

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

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

Each property accepts: xsmall, small, medium, large, or 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 an element is displayed as a group (like a container), you can set its opacity:

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

Border

If an element is displayed as a group (like a container), you can change its 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 format (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
    }
  }
}

Bundled icons

LikeC4 includes icons (over 5,000 in total) from these packs:

aws: from aws-icons.com
azure: from microsoft.com
bootstrap: from Bootstrap Icons (2,000+ icons)
gcp: from gcpicons.com
tech: from techicons.dev and svglogos.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
  }
  ui = component 'User Interface' {
    icon bootstrap:house
  }
}

Icon color

Use iconColor to override the icon color independently of the element fill.
Applies to bundled bootstrap:* icons.

model {
  api = service 'API' {
    style {
      icon tech:nodejs    // ⛔️ Not applied
      icon bootstrap:gear // ✅ Applies to `bootstrap:*` icons.
      iconColor indigo
    }
  }
}

iconColor accepts theme colors or custom colors defined in the specification.

Icon size

Use iconSize to resize the icon without changing the element size:

model {
  api = service 'API' {
    style {
      icon tech:nodejs
      iconSize sm
    }
  }
}

iconSize uses the same values as size and defaults to the element size (i.e. if not specified, but size is ‘large’, icon will be ‘large’).

Icon position

Use iconPosition to place the icon around the element text:

model {
  api = service 'API' {
    style {
      icon tech:nodejs
      iconPosition top
    }
  }
}

Supported values: left (default), right, top, bottom.

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

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

The next section explains how to customize relationships per view.

Relationship properties

Besides 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