Skip to content
Mermaid Studio Logo Mermaid Studio
New Mermaid Studio Core — free Mermaid diagram support in JetBrains IDEs — Install now →

Live Preview

Last updated:

Mermaid Studio shows a live preview of your diagram alongside your code. As you type, the diagram updates automatically.

Opening the Preview

Section titled “Opening the Preview”

The split editor with live preview opens automatically when you open a Mermaid file (.mmd or .mermaid). If you only see the code editor:

  1. Click the split-view icon in the top-right corner of the editor tab
  2. Or go to View > Tool Windows and look for preview options
  3. Or right-click in the editor and look for preview options

Editor Layouts

Section titled “Editor Layouts”

Use the layout icons in the editor toolbar to choose how the editor and preview are arranged:

  • Side by side — Code on the left, preview on the right (default)
  • Vertical split — Code on top, preview on bottom
  • Preview only — Hide the code editor temporarily
  • Editor only — Hide the preview temporarily

Toolbar Actions

Section titled “Toolbar Actions”

The preview toolbar provides quick access to diagram configuration. These actions are available in both preview mode and edit mode. The Theme, Look, and Layout dropdowns write their selection to the diagram’s frontmatter configuration.

Theme

Section titled “Theme”

Choose a Mermaid theme for the active diagram. Options are Auto (default, follows the IDE theme), Default, Dark, Forest, Neutral, and Base, plus the Mermaid 11.14.0 Neo and Redux variants (Neo, Neo Dark, Redux, Redux Dark, Redux Color, Redux Dark Color) on diagram types that render them with explicit upstream styling.

The dropdown filters its options based on the current diagram type, so values that would render identically to the base theme are hidden. See Theme and Look compatibility for the full matrix.

Look

Section titled “Look”

Choose the rendering style: Auto (default), Classic, Hand Drawn, or Neo. Like the Theme dropdown, the Look dropdown only shows values the current diagram type supports — for example, Hand Drawn is hidden on diagram types that do not implement it. Neo was added in Mermaid.js 11.14.0.

Layout

Section titled “Layout”

Switch the layout algorithm used to position diagram elements (for example, dagre or elk). This dropdown only appears on diagram types that support multiple layouts. Layouts beyond the default require enabling the corresponding engine in Mermaid Runtime settings.

Background

Section titled “Background”

Set the background color of the live preview pane: Match Editor, Auto, Black, or White. Auto picks white or black based on the diagram’s resolved theme. The toolbar dropdown sets a per-editor override; the global default is configured in Preview settings.

Diagram Documentation

Section titled “Diagram Documentation”

Opens the official Mermaid.js documentation for the current diagram type in your browser.

Zoom and Pan

Section titled “Zoom and Pan”

Mouse Controls

Section titled “Mouse Controls”
  • Scroll wheel zooms in and out
  • Command Control + scroll wheel zooms toward the cursor
  • Middle-click drag pans the diagram

Trackpad Gestures (macOS)

Section titled “Trackpad Gestures (macOS)”
  • Pinch zooms in and out
  • Two-finger drag pans the diagram

Keyboard Controls

Section titled “Keyboard Controls”
  • Plus Sign Plus Sign or Equal Sign Equal Sign zooms in
  • Minus Sign Minus Sign zooms out
  • 0 0 resets the view to fit the diagram
  • 1 1 sets the zoom to exactly 100%
  • Arrow keys pan the diagram

Toolbar Buttons

Section titled “Toolbar Buttons”

Zoom control bar

The zoom control bar provides five buttons:

  • Zoom In and Zoom Out
  • Zoom 100% — Actual size
  • Reset — Fit the diagram in the viewport
  • Fit Content — Fit the diagram with padding on all sides

A zoom indicator displays the current percentage briefly after each change.

You can configure the position and layout of the zoom controls in Preview settings.

Finding Text in Preview

Section titled “Finding Text in Preview”

Press Command + F Control + F to search for text in the rendered diagram. A search bar appears at the top of the preview. Type your search term and press Enter to highlight matches.

Theme Sync

Section titled “Theme Sync”

The preview automatically matches your IDE theme:

  • Light IDE theme — Diagrams render with light colors
  • Dark IDE theme — Diagrams render with dark colors

When you switch your IDE theme, the preview updates immediately to match.

For dark themes where the background is too dark, you can enable Lighten Dark Backgrounds in Preview settings to improve visibility.

Edit Mode

Section titled “Edit Mode”

Some diagram types also support direct manipulation in the preview — click to select elements, drag to move them, draw connections, edit labels inline, and restyle elements from the Style Pane. See Edit Mode for the full list of supported diagrams and actions.

Troubleshooting

Section titled “Troubleshooting”

Preview shows “Preview not available”: Your IDE may not support JCEF (the embedded browser). This is rare on modern JetBrains IDEs. Try restarting your IDE.

Diagram does not render: Check for syntax errors in your code. Error messages appear in the preview panel. Verify your diagram type keyword is correct (e.g., flowchart, sequenceDiagram).

Preview appears stuck: If a render takes too long, the preview shows an error overlay with a retry button. Editing the source code also triggers a fresh render attempt.

See Also

Section titled “See Also”