Styling
LikeC4 provides advanced customization capabilities. You can change colors, shapes, sizes, and icons of elements and relationships.
Element
Section titled “Element”There are multiple ways to style elements:
- Style all elements of a kind in
specification - Specific for an element in
modelordeployment - Override styles in
view(more on this in next section)
Elements of a kind
Section titled “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
Section titled “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
Section titled “Per view”Next section clarifies how to customize elements per view.
Style properties
Section titled “Style properties”specification { element actor { style { shape person } }}Available shapes: rectangle (default), storage, cylinder, browser, mobile, person, queue.
specification { element actor { style { color red } }}Available colors: primary (default), secondary, muted, amber, gray, green, indigo, red.
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
Section titled “Opacity”If element displayed as a group (like a container), you can set opacity:
specification { element element { style { opacity 10% } }}Border
Section titled “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
Section titled “Multiple”To display element as multiple instances, set multiple to true:
specification { element element { style { multiple true } }}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 } }}Aliased icons
Section titled “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
Section titled “Bundled icons”LikeC4 includes a set of icons from these packs:
aws:from aws-icons.comazure:from microsoft.comgcp:from gcpicons.comtech: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 }}Relationship
Section titled “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
Section titled “Relationships of a kind”Relationships can be styled in specification:
specification { relationship async { color amber line dotted head diamond tail vee }}Specific Relationship
Section titled “Specific Relationship”model { customer -> ui 'opens in browser' { style { line solid color amber } }}Relationship per view
Section titled “Relationship per view”Next section clarifies how to customize relationships per view.
Relationship properties
Section titled “Relationship properties”Besides the color, relationships may have the following properties:
| line | example |
|---|---|
| dashed | .. |
| solid | .. |
| dotted | .. |
By default, the line is dashed.
Arrow type
Section titled “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 | .. |
onormalmeans “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
Section titled “Styles customization”How to override default styles is explained in project configuration