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.
message-flow	Every message flow, the links written with NEXT-MESSAGE. A property it does not set comes from edge.
association	Every association, the links written with NEXT-ASSOCIATION. A property it does not set comes from edge.
activity, gateway, event, data, start, end, attachment, subprocess	Every node of that type.
annotation	Every text annotation. A property it does not set comes from attachment.
#id	The single node with that identifier.
swimlane	Every swimlane. The fill paints the header; the band stays transparent so the document background shows through.
pool	Every pool header and outline. A property it does not set comes from swimlane.
subprocess-group	Every expanded subprocess container.

message-flow {
    stroke: '#2f6fed';
    strokewidth: '1.5';
}

A message flow is always dashed, with an open circle at its source and an open arrowhead at its target. The stylesheet sets its colour and width, not its pattern. None of the shipped stylesheets has a message-flow block, and message flows there take the edge colours.

association {
    stroke: '#6b7280';
}

An association is always dotted, without an arrowhead. The stylesheet sets its colour and width, not its pattern. None of the shipped stylesheets has an association block, and associations there take the edge colours.

pool {
    stroke: '#2f6fed';
    pool-gap: '60';
}

None of the shipped stylesheets has a pool block, and pools there take the swimlane colours.

annotation {
    stroke: '#6b7280';
    text-color: '#4b5563';
}

A text annotation draws its bracket in the stroke colour and has no fill. None of the shipped stylesheets has an annotation block, and text annotations there take the attachment colours.

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, pool, subprocess-group	A color.
stroke	edge, message-flow, association, element, #id, swimlane, pool, subprocess-group	A color.
strokewidth	edge, message-flow, association, element, #id	A number of pixels.
text-color	element, #id, swimlane, pool, 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 document, an element type, an #id, swimlane, pool and subprocess-group. A selector that does not set a typography property takes the one document sets; a property neither sets 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
• Roboto
• Open Sans
• Lato
• Source Sans 3

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, pool	The space either side of the rotated swimlane label, and on pool either side of the rotated pool label.
pool-gap	pool	The smallest space between two pools. Without a value it is 40 pixels.
group-inset	subprocess-group	The space between a subprocess container and its contents.

Each value is a non-negative number of pixels.

Flow direction

flow-direction is set on document and takes one of two values.

Value	Layout
left-to-right	The process flows from left to right. Swimlanes and pools are rows with their label on the left. This is the layout without the property.
top-to-bottom	The process flows from top to bottom. Swimlanes and pools are columns with their label across the top, written horizontally.

document {
    flow-direction: 'top-to-bottom';
}

Any other value is a stylesheet error naming the property and the line. The Direction control in the Styling dialog sets the same property.

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, or a stylesheet of its tenant, in the styling dialog, and layers its own .pms override on top. The override composes after the stylesheet, and a declaration in the override wins over the same declaration in the stylesheet.

The six color fields in the styling dialog write into the project's override, never into the stylesheet. A color set in a field wins over the stylesheet's color. An empty field shows the stylesheet's color as its placeholder and leaves that color in effect, and clearing a field returns to it. Picking another stylesheet changes the placeholders of the empty fields and leaves the filled fields as they are.