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

Style properties

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

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.

Opacity

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

specification {

  element element {
    style {
      opacity 10%
    }
  }

}
model {

  element group {
    element child
  }
}

Border

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

specification {

  element element {
    style {
      opacity 10%
      border dotted
    }
  }
}

Icon

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

model {
  k8s = service 'K8s Service' {
    style {
      icon https://icons.terrastruct.com/dev%2Fpostgresql.svg
    }
  }
}

Relationship

Relationships can be styled using the kinds:

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

At the moment, the styling applies globally and cannot be overridden per view.
Let us know and open an issue if you need it.

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”

Refer to Graphviz arrowType for visuals.