Documentation

Getting Started

Installation Install Mermaid Studio from the JetBrains Marketplace.

Your First Diagram Create your first Mermaid diagram with a quick tutorial.

Editor Features

Syntax Highlighting Rich highlighting for all Mermaid diagram types.

Live Preview See your diagrams render in real-time as you type.

Visual Editing Select, drag, connect, and style diagram elements visually.

Code Completion IntelliSense-style suggestions for Mermaid syntax.

Formatting Auto-format diagrams with per-diagram-type indentation and spacing settings.

Validation Catch syntax errors with inline error highlighting.

References & Refactoring Rename nodes, find usages, and navigate to definitions.

Export Export diagrams to PNG or SVG.

Sample Diagram Picker Start from a curated sample with optional styled variants and theme controls.

Theme CSS Write custom CSS in frontmatter with highlighting, validation, and class-name completion.

Integration

Mermaid in Markdown Edit and preview Mermaid diagrams in Markdown files.

AI

MCP Tools Generate high quality diagrams with AI agents.

Diagram Sync Keep exported images in sync with your diagrams.

Configuration

Preview Settings Customize the diagram preview appearance and controls.

Icon Sets Use 200,000+ icons from popular libraries in your diagrams.

Mermaid Runtime Configure the Mermaid.js version used for rendering.

Localization Configure the plugin language and available translations.

Diagram Types

All Diagram Types Overview of all 30 supported Mermaid diagram types.

What's New Stay updated with the latest features and improvements.

Help

FAQ Answers to common questions about Mermaid Studio.