Style Pane

The Style Pane is a property inspector in the Mermaid Studio tool window that lets you view and edit CSS styling properties for diagram elements without writing style commands by hand.

Note

The Style Pane is currently available for Flowchart diagrams only. Support for additional diagram types will be added in future releases.

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 →

Opening the Style Pane

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

Selecting an Element

Place your cursor on a styleable element in the editor. The Style Pane automatically tracks your cursor position and displays the properties for the element under the caret.

Styleable elements in flowcharts include:

• Nodes - Individual diagram nodes
• Subgraphs - Subgraph containers
• Links - Edges between nodes (with linkStyle support)
• classDef definitions - CSS class definitions

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

Preset Gallery

The preset gallery lets you apply reusable styles.

Applying a Preset

Select a node or element, then choose a preset from the gallery to apply its styles. Built-in presets are included for common styling patterns.

Node Shape Editing

When a flowchart node is selected, the Style Pane shows a shape editor with:

• Shape selector - Choose from available node shapes with SVG icons showing each shape visually
• Arrow controls - Configure the direction of connections into and out of the node

Shape changes are written back to the diagram source as the appropriate Mermaid syntax.

Link Styling

When a link (edge) is selected, the Style Pane shows link-specific styling controls.

Changes are written as linkStyle declarations in the diagram source. If a linkStyle declaration already exists for the selected link, the Style Pane updates it in place. Otherwise, a new declaration is added.

You can navigate between links and their linkStyle declarations using Go to Related ( Control + Command + Up Arrow ControlCommandUp Control + Alt + Up Arrow CtrlAltUp ).

Editing Properties

Properties are organized into collapsible groups:

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 allows editing arbitrary CSS properties beyond the built-in groups. You can add any valid CSS property here for advanced styling needs.

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

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.

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 and show an X button to remove the property.
• 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.

Link Properties

When a flowchart node is selected, the Style Pane shows a Link tab for editing click handler properties. This tab is only visible for nodes.

Property	Description
URL	The destination URL for the click handler
Tooltip	Hover text shown over the node
Target	Link target (_self, _blank, _parent, or _top)

The Tooltip and Target fields are disabled until a URL is set.

Setting a URL creates a click statement in the diagram source (e.g., click A href "https://example.com" "My tooltip" _blank). If the node already has a click handler (including JavaScript callbacks), it is replaced. Clearing the URL removes the click statement entirely.

Undo Support

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