Visual Editing

This feature requires a paid license (Core or Studio). Compare editions →

Visual editing turns the live preview from a passive display into an interactive canvas. You select, drag, connect, and inline-edit elements directly in the preview, and every change is written back to the source. Its other half is the Style Pane, a property inspector that restyles the selected element (colors, presets, and diagram-type-specific controls) and writes the result back as Mermaid styling syntax.

Supported diagram types

The available actions depend on the active diagram type, and the exact capabilities are not identical across them. Some of those differences are deliberate (an interaction that fits one diagram type may not fit another), and others reflect that visual editing is built out iteratively per diagram type rather than reaching full parity all at once. Each supported diagram type has its own section on its diagram-type page covering the actions available there:

• Flowchart
• Class diagram

Visual editing is added selectively, for high-value diagram types: commonly used ones whose syntax is involved enough, or whose element-level styling is rich enough, to justify the UX investment. Support for additional diagram types will be added in future releases.

Edit Mode

The Edit Mode toggle (pencil icon) in the preview toolbar flips the preview between preview mode and visual editing.

The left-most group of toolbar actions is specific to the current diagram type. For flowcharts these are Add Node (opens the shape picker) and Add Subgraph (inserts a new container); other diagram types contribute their own.

The rest of the toolbar is the same for every diagram type, from left to right:

1. Theme — Set the Mermaid theme (Auto, Default, Dark, Forest, Neutral, Base)
2. Look — Set the rendering style (Auto, Classic, Hand Drawn)
3. Layout — Set the layout algorithm (dagre, elk, etc.)
4. Background — Set the preview background color
5. Edit Mode — Toggle edit mode on or off (pencil icon)
6. Pan Mode — Toggle left-click panning (hand icon)
7. Caret Tracking — Sync editor cursor with preview highlighting
8. Diagram Documentation — Open Mermaid.js docs for the current diagram type

A dot grid background appears behind the diagram when edit mode is active.

In preview mode (edit mode off), the diagram behaves like a standard Mermaid render. Built-in Mermaid interactivity such as actor menus and external links works normally, and you can navigate to source by holding Command Command Control Ctrl and clicking an element.

In edit mode, clicking an element navigates directly to its source declaration without needing a modifier key. The selection, manipulation, and creation features described on each diagram-type page become available.

Pan Mode

The Pan Mode toggle in the preview toolbar switches between selection and panning.

When pan mode is active, left-click dragging pans the viewport instead of selecting elements. You can still click individual elements to select them.

Middle-click dragging always pans the diagram regardless of whether pan mode is enabled.

Caret Tracking

The Caret Tracking toggle (autoscroll icon) in the preview toolbar links cursor movement in the editor with element highlighting in the preview.

With caret tracking on, moving the cursor to a diagram element in the source code highlights the corresponding element in the preview and updates the Style Pane.

Caret tracking is off by default for .mmd files and can be toggled as needed. In Markdown files, caret tracking is always active.

Navigation

Visual editing provides bidirectional navigation between the source code and the rendered diagram.

• Preview to source — Click an element in the preview to jump to its declaration in the editor. In preview mode (edit mode off), hold Command Command Control Ctrl and click instead.
• Hover highlighting — Navigable elements highlight when you hover over them, signalling what you can interact with.

Selection

Single selection

Click an element in the preview to select it. The selected element is highlighted, and its source range is selected in the editor.

Multi-selection

Build up a selection of multiple elements using any of these methods:

• Shift+Click an element to add or remove it from the current selection.
• Marquee select — Click and drag on an empty area of the canvas to draw a selection rectangle around multiple elements.

Command + A CommandA Control + A CtrlA selects every element in the diagram.

When multiple elements are selected, the Style Pane shows only the properties common to all of them.

Each diagram type adds its own structural selection commands (parent / children / siblings, container traversal, and so on). See the diagram-type pages linked above for the specific shortcuts.

Inline label editing

Double-click an element in the preview to edit its label inline. An editable text overlay appears over the element, and the change is written back to the source when you commit it (press Enter Enter Enter Enter or click outside the element). Which elements are editable varies by diagram type, and some elements open a small dialog instead of an inline overlay; see the diagram-type pages linked above.

Typography

Press Command + B CommandB Control + B CtrlB to toggle bold or Command + I CommandI Control + I CtrlI to toggle italic on the selected element’s label. When multiple elements are selected, the shortcut applies to all of them at once.

Deleting elements

Press Backspace Backspace Backspace Backspace or Delete Delete Delete Delete to remove the selected element or elements, along with their source. Batch deletion works the same way: select multiple elements, then press Delete to remove them all.

Undo

All visual-editing actions integrate with the IDE’s undo system. Press Command + Z CommandZ Control + Z CtrlZ to revert any change made through the preview.

Renaming a selected element via Refactor > Rename follows through to both the Style Pane header and the preview highlight automatically. The selection clears only when the element is actually deleted, so a rename keeps your in-progress styling work pinned to the element you just renamed.

See also

• Live Preview for zoom, pan, and toolbar controls.
• Style Pane for the property inspector that pairs with selection.
• Keyboard Shortcuts for a consolidated shortcut reference.