Skip to content
Mermaid Studio Logo Mermaid Studio

The smartest way to author Mermaid diagrams

Code intelligence, visual editing, and AI tooling, all native to JetBrains IDEs and fully offline.

Install Free Documentation →
Mermaid Studio in IntelliJ IDEA
Code Intelligence

Built on deep semantic understanding

Custom parsers for every diagram type power code intelligence that text editors can't match.

  1. Smart completion

    Suggestions match exactly what fits at your cursor. Keywords, nodes and classes already in your file, structural elements, and icons from bundled FontAwesome, AWS, Azure, and GCP sets appear only where they'd actually work.

  2. Real-time validation

    Errors surface as you type, including semantic mistakes like unknown references and invalid diagram structures. Quick fixes repair common issues with a single keystroke.

  3. Safe refactoring

    Rename any node, class, or subgraph and every reference across the diagram updates with it. No search-and-replace, no missed references, no manual cleanup.

  4. Find usages & navigation

    Jump to definition, list every use of any element, and navigate the diagram like any other IDE symbol. Large diagrams stop feeling unmanageable.

  5. Semantic highlighting

    Nodes, edges, labels, and classes each get their own color, making the structure of a diagram readable at a glance.

Completion popup suggesting keywords and existing nodes Inline validation errors with quick-fix suggestions Rename refactoring dialog updating every reference Find Usages panel listing occurrences of a diagram element Semantic syntax highlighting on a flowchart
In Your IDE, Fully Offline

The full Mermaid toolchain, built into your IDE

Drag-and-drop editing, MCP-powered AI generation, and live preview, native to JetBrains IDEs and fully offline. With two features no other Mermaid editor has: full code intelligence inside Markdown code fences, and theme CSS completions for every class in the rendered preview.

Flowchart Editor

Drag-and-Drop Visual Editing

Build and edit flowcharts visually with a live editor that writes Mermaid code for you. Add nodes, drag to connect, restyle with a click. The editor treats your file as the source of truth, making targeted edits that preserve comments and formatting.

Markdown Integration

Advanced editing and styling in Markdown

Completions, validation, refactoring, hover docs, and the visual style pane all work inside mermaid code fences, letting you edit and style diagrams directly in your Markdown files.

Markdown editor with fenced Mermaid diagrams alongside the IntelliJ preview and the Mermaid Studio style pane
MCP Tools

Equip your agents to build, repair, and validate diagrams

Our MCP toolkit exposes Mermaid Studio's code intelligence and rendering pipeline to AI agents. They can create, repair, validate, and render diagrams end to end. Compatible with Claude, Copilot, Cursor, and any MCP-aware agent.

▶ "Create an AWS architecture diagram"
⚡ getMermaidSyntaxGuide architecture-beta
⚡ searchMermaidIcons aws-lambda, aws-s3, aws-rds
✎ Writing diagram code...
⚡ analyzeMermaidDiagram ✓ valid
⚡ generateMermaidDiagram ✓ saved
Generated architecture diagram
Theme CSS

Style every detail of your diagrams

Go beyond default themes with full CSS highlighting and completion for the themeCSS: frontmatter. Class name completions come from the live rendered preview, so you always know exactly which selector targets the element you want to style.

Icon Sets

Advanced icon set management

FontAwesome, AWS, Azure, and GCP ship bundled. Paid tiers let you import from any Iconify collection or add custom icon repositories. Completion, the visual picker, and rendering draw from every set you've loaded, whatever its source.

Icon Sets settings panel listing bundled sets with prefixes and versions
Searchable visual icon picker docked alongside a diagram
Completion popup listing icon names while editing a diagram

Try every paid feature free for 30 days

Install Mermaid Studio for full code intelligence, visual editing, AI tooling, and advanced styling across every diagram type. No credit card required.

Start 30-day trial Compare editions
Export

Export, print, and sync on your terms

PDF, PNG, SVG, and auto-sync, with fine control over how each export looks.

Export dialog with format, scale, and background options
Free · every tier

Export to PNG & SVG

Precise control over scale, high-density output, and background fill. Preview before you save, or copy straight to the clipboard in one click.
Print dialog with page setup, margins, and a diagram preview
Core & Studio

Print to PDF

Paper size, margins, orientation, scaling, and custom page presets. A neutral-theme toggle keeps diagrams legible on black-and-white prints.
Diagram Sync settings panel with pattern-based export rules
Core & Studio

Auto-sync exports

Set a file pattern once and every matching diagram re-exports whenever it changes. Exported assets stay in lockstep with your source. No manual re-export loop.
26 Diagram Types

Support for every Mermaid diagram

All 26 native diagram types get rich syntax highlighting and live preview.

Flowchart Flowchart Sequence Sequence C4 C4 Context ER Diagram ER Diagram Gantt Gantt State State
Explore all diagram types
Compatibility

Works with every JetBrains IDE

IntelliJ IDEA WebStorm PyCharm PhpStorm RubyMine GoLand CLion Rider

JetBrains and the JetBrains IDE logos are trademarks of JetBrains s.r.o.

New to IntelliJ? Get started for free.

Setup guide
Editions & Pricing

Simple, transparent pricing

All editions support every Mermaid diagram type. Start free, upgrade to unlock visual editing, AI tooling, advanced styling, and full code intelligence.

Discounted & complementary licenses available

Start diagramming
with intelligence

Install Free Compare pricing