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 values to the diagram’s frontmatter configuration.

  • Theme — Auto (default), Default, Dark, Forest, Neutral, or Base
  • Look — Auto (default), Classic, or Hand Drawn
  • Layout — Available algorithms vary by diagram type (e.g., dagre, elk). Only appears for diagram types that support multiple layouts.
  • Background — Match Editor, Auto, Black, or White. This setting changes the background of the live preview pane. Auto mode chooses 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 — 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”

For interactive diagram editing, including click-to-select, drag-to-move, visual connections, and inline label editing, see Edit Mode.

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”