Stylesheets

A stylesheet is a .pms file that decides how a process is drawn. It is a list of blocks. Each block names a selector and sets properties on it.

activity {
    fill: '#ffffff';
    stroke: '#d5dae2';
    text-color: '#1d1d20';
}

Every value is quoted with single quotes and every property ends with a semicolon.

Selectors

Selector	Matches
document	The diagram as a whole.
edge	Every arrow.
activity, gateway, event, data, start, end, attachment, subprocess	Every node of that type.
#id	The single node with that identifier.
swimlane	Every swimlane header and band.
subprocess-group	Every expanded subprocess container. Parses today; the container itself is not drawn yet.

An #id block always wins over an element block, wherever the two appear in the file. Two blocks of the same selector merge, and the later value wins.

Color and line properties

Property	Applies to	Value
background	document	A color.
fill	edge, element, #id, swimlane, subprocess-group	A color.
stroke	edge, element, #id, swimlane, subprocess-group	A color.
strokewidth	edge, element, #id	A number of pixels.
text-color	element, #id, swimlane, subprocess-group	A color.

Typography properties

Property	Value
font-family	One of the shipped font families.
font-size	A number of pixels.
font-weight	normal, bold, or a numeric weight such as 600.
font-style	normal or italic.
line-height	A multiplier of the font size.

Typography is set on an element type, an #id, swimlane and subprocess-group. A property that is not set keeps its default: Arial, 12 pixels, normal weight, normal style, a line height of 1.2. An arrow label takes the typography of the node it leaves.

The shipped font families are:

• Inter

A font-family outside that list is a stylesheet error naming the property and the line. Every shipped family is embedded in an SVG export. An exported SVG reads the same on a machine where the font is not installed.

Spacing properties

Property	Applies to	Effect
node-padding	document	The space between a node's shape and the edge of its cell.
node-gap	document	The space between neighbouring cells.
swimlane-inset	swimlane	The space either side of the rotated swimlane label.
group-inset	subprocess-group	The space between a subprocess container and its contents.

Each value is a non-negative number of pixels.

Shape property

shape names one of the built-in shapes and is set on an element type or on an #id:

• rectangle
• circle
• diamond
• document
• cylinder

activity {
    shape: 'diamond';
}

#urgent-review {
    shape: 'rectangle';
}

A node keeps the shape of its own type when no shape is set. A name outside the list is a stylesheet error naming the property and the line.

Shipped stylesheets

Name	Look
Classic Light	Black shapes and text on white, in Arial.
Classic Dark	White shapes and text on near-black, in Arial.
Modern Light	Inter type on a brand-neutral light palette, with a single accent on the start node.
Modern Dark	The same type and spacing as Modern Light, on the dark palette.

A project saved before these were renamed keeps working: Light, Dark and Editorial still resolve to Classic Light, Classic Dark and Modern Light.

A project picks one of these in the styling dialog, and layers its own six color overrides on top.