Editor Screenshot Placeholder
Syntax highlighting with live preview panel
Complete Diagram Support
Rich syntax highlighting for all native Mermaid diagram types. Every keyword, node, edge, and style is precisely colored for maximum readability.
Flowcharts, sequence diagrams, class diagrams, ER diagrams, state diagrams, Gantt charts, pie charts, mindmaps, and everything else Mermaid offers.
Live Preview
See your diagrams render in real-time as you type. Choose from side-by-side, vertical, or full-screen preview layouts.
Export your diagrams to PNG or SVG with a single click.
Smart Code Completion
IntelliSense-style code completion that understands Mermaid syntax. Get suggestions for keywords, node references, and style properties.
Never forget a syntax pattern again.
Real-time Validation
Catch syntax errors before you render. The plugin highlights problems directly in the editor with detailed error messages.
Quickly fix issues with intuitive error navigation.
Refactoring Support
Rename nodes and update all references automatically. Find usages, navigate to definitions, and refactor with confidence.
Built on IntelliJ’s powerful PSI infrastructure.
Markdown Integration
Mermaid code blocks in Markdown files get full language support. Syntax highlighting and preview work seamlessly within your documentation.
Perfect for README files and technical documentation.
Mermaid Studio supports every native Mermaid.js diagram type:
Mermaid Studio works with every IntelliJ-based IDE:
Product icons are trademarks of JetBrains s.r.o.
Install from the JetBrains Marketplace
Open your IDE, go to Settings → Plugins → Marketplace, and search for “Mermaid Studio”.
Create a Mermaid file
Create a file with .mmd or .mermaid extension, or use a code block in Markdown.
Start diagramming!
Write your Mermaid code and watch it come to life in the preview panel.
How is Mermaid Studio different from other Mermaid plugins?
Mermaid Studio is built from the ground up as a full language implementation, not just a preview tool. You get real syntax highlighting that understands every diagram type, intelligent code completion, error detection as you type, and refactoring support like rename and find usages. It’s the difference between a text editor and a proper IDE.
Will it slow down my IDE?
No. Mermaid Studio uses IntelliJ’s native PSI infrastructure for parsing and analysis, so it’s fast and responsive even with large diagrams. The live preview renders asynchronously and won’t block your editing.
Does it work with Mermaid in Markdown files?
Yes. Mermaid code blocks in Markdown files get full language support including syntax highlighting, validation, and preview. Your README files and documentation work seamlessly.
What Mermaid versions are supported?
Mermaid Studio supports all native diagram types from the latest Mermaid.js release. As Mermaid evolves, we update the plugin to support new syntax and diagram types.
Can I use it for team documentation?
Mermaid Studio makes diagrams-as-code practical for teams. Diagrams live in your repository, get version controlled with your code, and render beautifully in code reviews. Export to PNG or SVG when you need standalone images.
