Live Preview

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

flowchart TD
  A[Write Code] --> B{Preview}
  B --> C[Instant Feedback]
  C --> A

Opening the Preview

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

1. Editor tabs: Click the split-view icon in the top-right corner of the editor
2. View menu: Go to View > Tool Windows and look for preview options
3. Right-click: Right-click in the editor and look for preview options

Editor Layouts

You can 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

Use the layout icons in the editor toolbar to switch between views.

Auto-Refresh

The preview updates automatically as you type. There is a short delay (about 300ms) after you stop typing before the preview refreshes. This keeps the preview responsive without flickering on every keystroke.

Zoom and Pan

For large diagrams, you can:

• Zoom: Use the scroll wheel to zoom in and out
• Pan: Click and drag to move around the diagram
• Reset: Double-click to reset the view

Finding Text in Preview

To search for text in the rendered diagram:

• Press Cmd+F (Mac) or Ctrl+F (Windows/Linux)
• Or right-click in the preview and select Find…

The search bar appears at the top of the preview. Type your search term and press Enter to highlight matches.

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.

Troubleshooting

If the 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.

If the 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).