The smartest way to author Mermaid diagrams

Semantic highlighting. Code intelligence. Live editing. MCP tools. Fully offline.

Install Free Documentation →

Looking for the full experience? See pricing

IDE Features

Built on deep semantic understanding

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

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.

MCP Tools

AI-Powered Generation

MCP tools leverage Mermaid Studio's code intelligence, empowering AI assistants to generate valid diagrams autonomously. Works with Claude, Copilot, Cursor, and more.

▶ "Create an AWS architecture diagram"

⚡ getMermaidSyntaxGuide architecture-beta

⚡ searchMermaidIcons aws-lambda, aws-s3, aws-rds

✎ Writing diagram code...

⚡ analyzeMermaidDiagram ✓ valid

⚡ generateMermaidDiagram ✓ saved

Smart Completion

Suggests existing nodes, valid keywords, and structural elements based on context.

Live Preview

See your diagram render in real-time. Click any element to jump to its definition.

Safe Refactoring

Rename any element and all references update automatically.

Real-time Validation

Catch errors as you type. Semantic analysis goes beyond basic syntax checking.

Export & Sync

Generate PNG or SVG. Auto-sync keeps exported files updated when your diagram changes.

Markdown Integration

Full code intelligence inside Markdown code fences. Completions, validation, refactoring, and element styling all work inline.

26 Diagram Types

Semantic highlighting and live preview for every Mermaid diagram

All 26 native diagram types get rich syntax highlighting and live preview. More complex types like Flowchart, Sequence, and Class also get completions, validation, and refactoring.