Style Classes Reference

Place style classes in parentheses on a node label declaration, a connection endpoint, an edge arrow, or a group declaration:

api(fill primary): API Server
api ->(bold dashed) worker
worker(circle): Worker
services(horizontal) {
  cache
  database
}
cache: Cache
database: Database

See Styling for the syntax rules.

Node Shapes

Class	Shape
rectangle	Rectangular box (default)
circle	Circle
ellipse	Ellipse
diamond	Diamond

start(circle): Start
check(diamond): Ready?
finish(ellipse): Done
start -> check -> finish

Colors and Fill

Color classes select the border color on nodes and groups, or the stroke color on edges. Add fill before a color class to fill a node with that color. Nodes have transparent interiors by default; groups have a shaded background.

Class	Color role
primary	Primary accent
secondary	Secondary accent
info	Informational accent
success	Success accent
warning	Warning accent

The renderer’s palette supplies the colors.

api(fill primary): API Server
worker(fill success): Worker
api ->(primary) worker

Use one color class per element. fill by itself uses the primary fill color.

Line Styles

These classes apply to node and group borders and to edge strokes:

Class	Effect
dashed	Dashed line
dotted	Dotted line
bold	Heavier stroke

Lines are solid with normal stroke weight by default.

a(dashed): Draft
b(dotted): Review
a ->(bold) b

Layout

Set diagram direction with a root declaration, or set a group’s layout on its opening declaration:

(horizontal)
client -> services
services(vertical) {
  api
  worker
}
api: API
worker: Worker

Class	Effect
horizontal	Arrange left-to-right
vertical	Arrange top-to-bottom
layout-2-col	Arrange a group’s nodes in 2 columns
layout-3-col	Arrange a group’s nodes in 3 columns
layout-4-col	Arrange a group’s nodes in 4 columns
layout-6-col	Arrange a group’s nodes in 6 columns

Column layouts apply to groups containing nodes directly:

services(layout-2-col) {
  api
  worker
  cache
  database
}
api: API
worker: Worker
cache: Cache
database: Database

Without an explicit layout class, the diagram is arranged automatically from its connections.