Preview
Access preview settings at Settings / Preferences > Tools > Mermaid Diagrams > Preview.
Theme Settings
Section titled “Theme Settings”Lighten Dark Backgrounds
Section titled “Lighten Dark Backgrounds”When enabled, the preview background is lightened by 10% if your editor theme has a very dark background. This improves diagram visibility on themes like Darcula or One Dark.
Control Settings
Section titled “Control Settings”Control Position
Section titled “Control Position”Choose where zoom and pan controls appear in the preview:
- Top Left
- Top Right
- Bottom Left
- Bottom Right (default)
Control Layout
Section titled “Control Layout”Choose how controls are arranged:
- Vertical - Buttons stacked vertically (default)
- Horizontal - Buttons arranged side-by-side
Navigation Settings
Section titled “Navigation Settings”Found under Settings > Tools > Mermaid Diagrams > Navigation.
Configure click-to-navigate behavior in the preview:
- Enable navigation from preview - Click elements to jump to source
- Modifier Key - Choose Ctrl, Cmd, Alt, or Shift for navigation clicks
- Highlight on hover - Show visual feedback when hovering over navigable elements
Layout Plugins
Section titled “Layout Plugins”Found under Settings > Tools > Mermaid Diagrams > Plugins.
Enable additional layout algorithms:
- ELK - Advanced layouts for flowcharts (
layout: elk) - tidy-tree - Optimized tree layouts for mindmaps (
layout: tidy-tree)
Layout plugins increase memory usage. Only enable what you need.