Preview
Last updated:
Mermaid Studio’s diagram preview pane provides interactive pan and zoom controls along with customizable appearance settings. Access preview settings at Settings > Tools > Mermaid Studio > Preview.
Theme Settings
Section titled “Theme Settings”Diagram colors come from the runtime appearance defaults, which pick adaptive light and dark themes, a look, and a font that apply across the live preview, Markdown preview, export, and print. The settings below tune how the preview pane itself displays those diagrams.
Background
Section titled “Background”Set the background color of the preview pane: Match Editor, Auto, Black, or White. Auto picks white or black based on the diagram’s resolved theme. Every editor follows this setting; there is no per-editor override.
The setting also decides which variant a standalone diagram without an explicit theme renders. With Auto or Match Editor, the light or dark variant follows your IDE theme. With White or Black, the forced canvas decides, so a dark IDE with a White background renders the light variant. The Appearance menu, the Switch Diagram Theme popup, and Match preview export, print, and copy all use that same variant. Markdown previews ignore this setting and follow the IDE theme; see Light and dark rendering.
Lighten Dark Backgrounds
Section titled “Lighten Dark Backgrounds”Some dark IDE themes have very dark gray or black backgrounds that can make certain diagram elements or edges difficult to see.
Enable Lighten Dark Backgrounds to lighten the preview background by 10%, improving diagram visibility.
As seen below, enabling this option changes the preview background from very dark to a lighter shade, making black elements more visible:
Toolbar Layout
Section titled “Toolbar Layout”The preview shows two toolbars over the diagram: the zoom controls, and in edit mode the diagram actions toolbar. The Toolbar Layout group places each one where it suits your layout.
| Setting | Description |
|---|---|
| Zoom | Position of the zoom controls (default Bottom Right) |
| Diagram actions | Position of the diagram actions toolbar (default Top Right) |
| Corner orientation | Vertical (default) or Horizontal for a toolbar placed in a corner |
Each position is a corner (Top Left, Top Right, Bottom Left, Bottom Right) or the middle of an edge (Top Center, Middle Left, Middle Right, Bottom Center). A toolbar at the middle of the top or bottom edge always runs horizontally, and one at the middle of a side always runs vertically. Give both toolbars the same position and they line up as one group, with the diagram actions first.
Navigate to Declaration
Section titled “Navigate to Declaration”Navigate to Declaration lets you jump from a rendered element in the preview to its definition in the source code.
In preview mode (edit mode off), hold
| Setting | Description |
|---|---|
| Navigation from preview | Click elements to jump to their source definition |
| Highlight on hover | Show visual feedback when hovering over navigable elements |
For the full interactive editing experience including selection, drag-to-connect, and inline editing, see Visual Editing.
Trusted projects
Section titled “Trusted projects”The preview pane (along with export, print, copy, Markdown rendering, and Diagram Sync) stays disabled in untrusted projects.
Once you mark the project trusted, the preview re-activates automatically with no IDE restart required and no preview-specific setting to flip.
See Security for the full behavior and for the related Mermaid.js securityLevel config that controls what diagrams can do at render time.