Mermaid Visualizer downloads statistics

Mermaid diagrams in your IDE — live preview, code intelligence, and export, all offline.

Rendering & Preview

• Live rendering of ```mermaid code blocks in the Markdown preview • Dedicated split editor with live preview for .mmd and .mermaid files • Zoom (Ctrl+wheel), pan, fit-to-window and 1:1 controls • Open in new tab — pop any diagram into its own full-size preview tab • Export diagrams as SVG or PNG — copy to clipboard or save to file • Automatic dark/light theme matching with your IDE • All 34+ Mermaid diagram types (including the new use case and agentflow diagrams) — fully offline with bundled Mermaid.js (v12.2.0) • ELK and dagre layouts — ELK is bundled and Mermaid 12's default; layout: dagre / layout: elk (with elk.* options) work per diagram in the YAML frontmatter, as does the flowchart-elk header keyword, or globally from the settings

Code Intelligence

• Syntax highlighting — keywords, diagram types, arrows, strings, comments, punctuation • Code completion — diagram types, context-sensitive keywords, node/participant names, arrows, directives • Go to Definition (Ctrl+B) — navigate to node/participant declarations • Find Usages (Alt+F7) — find all references to a node across the diagram • Rename (Shift+F6) — rename nodes/participants with all references updated • Structure View (Alt+7) — hierarchical view of diagrams, blocks, and nodes • Code Folding — fold subgraphs, loop/alt/opt/par blocks, and consecutive comments • Inspections & quick-fixes — unknown diagram types (with typo suggestions), invalid arrows, unused nodes • Render error annotations — Mermaid.js parsing errors surfaced directly in the editor

Settings

Configurable via Settings > Tools > Mermaid — theme (incl. the Mermaid 12 redux/neo themes), look (classic/hand-drawn/neo), layout engine (ELK/dagre), font family, max text size, live reload delay, max preview height.

Custom rendering colors — optionally override the visualizer background color and the line/edge color (disabled by default, so the rendering keeps following your IDE theme unless you opt in).

Customizable syntax colors via Settings > Editor > Color Scheme > Mermaid.

Usage

Write a ```mermaid fenced code block in any Markdown file and open the preview, or open any .mmd/.mermaid file.

Open source (Apache 2.0) — source code, issues & feedback on GitHub.