Keyboard Shortcuts

Last updated: Sep 14, 2026

This page lists keyboard shortcuts and mouse interactions available in the Mermaid Studio diagram preview. Shortcuts follow standard JetBrains conventions and can be customized in Settings > Keymap (search for “Mermaid”).

Zoom and Pan

Command + 0 Control + 0 fits the diagram to the viewport (capped at 100%)
Command + Shift + 0 Control + Shift + 0 sets zoom to exactly 100%
Command + Plus Sign Control + Plus Sign or Command + Equal Sign Control + Equal Sign zooms in
Command + Minus Sign Control + Minus Sign zooms out
Arrow keys pan the diagram by 50 pixels per press
Command Control + scroll wheel performs focal zoom (toward cursor)
Scroll wheel zooms in and out
Middle-click drag pans the diagram

The fit / actual-size shortcuts work from either the source editor or the preview pane, so you don’t need to focus the preview before resetting the view. Zoom in / out require the platform-native modifier so they don’t interfere with typing while an inline label edit is open.

Edit Mode

Edit mode features require a paid license (Core or Studio).

Selection

Click an element to select it
Shift+Click to add or remove an element from the selection
Click+Drag on an empty area to marquee-select multiple elements
Command + A Control + A selects all elements
Alt + Shift + P Alt + Shift + P selects the parent subgraph
Alt + Shift + C Alt + Shift + C selects all children of the current subgraph
Alt + Shift + S Alt + Shift + S selects all siblings at the same level

Editing

Double-click a label to edit it inline
Command + B Control + B toggles bold on the selected element’s label (works with multi-selection)
Command + I Control + I toggles italic on the selected element’s label (works with multi-selection)
Command + G Control + G groups selected elements into a new subgraph
Command + Shift + G Control + Shift + G ungroups the selected subgraph, lifting its members into the parent scope
Minus Sign Minus Sign collapses the selected flowchart subgraphs (Mermaid.js 11.17.0+)
Plus Sign Plus Sign or Equal Sign Equal Sign expands the selected flowchart subgraphs; clicking a collapsed subgraph’s ellipsis row expands it too
Delete removes the selected element or elements
Command + Z Control + Z undoes the last edit mode operation

In preview mode, clicking an element triggers built-in Mermaid.js interactivity (actor menus, external links, etc.). Hold Command Control and click to navigate to the element’s source declaration instead.

In edit mode, a plain click navigates to the element’s source declaration. Hold Command Control and click to trigger Mermaid.js interactivity.

The Appearance dropdown on the preview toolbar works from the keyboard.

Command + L Control + L selects the Light variant
Command + D Control + D selects the Dark variant
Tab Tab and Shift + Tab Shift + Tab cycle between the mode toggle, the theme grid, the Manage… link, the custom theme grid, the look grid, the font grid, and the custom font field
Arrow keys move the focus ring within a grid; Home Home and End End jump to the first and last tile
Enter Enter or Space Space applies the focused tile

The popup opens with focus on the Light/Dark toggle. See Live Preview for what each group does.

Shape Picker

The shape picker that opens from the edit mode toolbar has three focus stops: the category tab strip, the shape grid, and the No Shape link.

Tab Tab and Shift + Tab Shift + Tab cycle between the three stops and wrap around
Left Arrow Left Arrow and Right Arrow Right Arrow on the tab strip switch categories
Arrow keys move between shapes in the grid; Home Home and End End jump to the first and last shape
Enter Enter or Space Space picks the focused shape

The picker opens with focus on the grid.

Find in Preview

Command + F Control + F opens the search bar in the diagram preview

Element Style Pane

Control + Command + Up Arrow Control + Alt + Up Arrow navigates between a link and its linkStyle declaration (Go to Related)
Enter Enter commits a text or numeric field; Escape Escape reverts an edited field to its loaded value
Tab Tab moves between controls without committing an unchanged field
Arrow keys move between preset chips; Enter Enter or Space Space applies the focused preset

In the color picker’s Color Wheel mode, the arrow keys move hue and chroma, Option + Up Arrow Alt + Up Arrow and Option + Down Arrow Alt + Down Arrow move tone, and holding Shift Shift steps by 10.

See Style Pane for the full keyboard model, including the preset gallery popup and the color picker.