Style Pane

The Style Pane is one part of Mermaid Studio’s visual editing workflow. It is a property inspector in the Mermaid Studio tool window that lets you view and edit CSS styling for diagram elements without writing style or classDef lines by hand.

This feature requires a paid license. With a Core license, available for Flowchart, Sequence, Class, State, ER, and Block diagrams. With a Studio license, available for all diagram types. Compare editions →

Supported diagram types

The controls the Style Pane shows depend on the active diagram type. Each supported diagram type has its own section on its diagram-type page covering the controls available there:

• Flowchart
• Class diagram

Support for additional diagram types will be added in future releases.

Opening the Style Pane

The Style Pane appears as a Style tab in the Mermaid Studio tool window, typically docked on the right side of the IDE. Click the tab to switch to it.

Selecting an element

Place your caret on a styleable element in the editor, or click the element directly in the live preview. The Style Pane tracks your selection and displays the properties for the element under the caret.

When a styleable element is selected, the header shows the element’s icon (matching the structure view), name, and label (if any).

Selection persistence

Once an element is selected, the selection stays pinned through editor focus changes, caret movements off the element, and unrelated text edits. The pane no longer rebuilds or loses its active mode selector on every keystroke, and it refreshes after edits from the formatter, an inspection quick fix, or other non-typing edit paths.

Renaming a selected element follows through to the pane header and the preview highlight automatically; the selection clears only when the element is actually deleted.

The same pinning, rename following, and edit-driven refresh apply to Mermaid diagrams embedded in Markdown code fences.

Editing properties

Properties are organized into collapsible groups. Color properties display a swatch next to the value; click the swatch to open the color picker. Dropdown properties like font-size and stroke-dasharray offer predefined values but also accept custom input.

Fill and Stroke

Property	Description
fill	Background color
stroke	Border color
stroke-width	Border thickness
stroke-dasharray	Border dash pattern (solid, dashed, dotted)
fill-opacity	Background transparency (0 to 1)
stroke-opacity	Border transparency (0 to 1)

Typography

Property	Description
color	Text color
font-size	Text size
font-weight	Text weight (normal, bold, or numeric 100-900)
font-family	Font face (generic or specific)
font-style	Normal, italic, or oblique

Shape

Property	Description
rx	Corner radius (horizontal)
ry	Corner radius (vertical)

Other

The Other section is collapsible and accepts arbitrary CSS properties beyond the built-in groups.

Property	Description
opacity	Overall element transparency (0 to 1)
cursor	CSS cursor style
visibility	Visible, hidden, or collapse

Property sources

The Style Pane shows where each property value comes from.

• Inline styles — From style A fill:#f9f statements. These have the highest precedence. When a property has a value to remove, the row shows an X button whose tooltip names the specific property (for example Remove Fill); the button hides itself when there’s nothing to remove.
• Class definitions — From a classDef applied via class A myClass or A:::myClass. These show a source badge with the class name. Click the badge to navigate to the class definition, or click the unlink button to remove the class association.
• linkStyle declarations — From linkStyle 0 stroke:#f00 statements targeting the selected link by index.

When the same property is set in both a class and an inline style, the inline style takes precedence.

Undo

All Style Pane changes integrate with the IDE’s undo system. Press Command + Z CommandZ Control + Z CtrlZ to revert a change.