Mermaid Diagram Pro
Enhanced Mermaid diagram support — templates, Mermaid Live preview, validation
11 built-in Mermaid diagram templates. Quick access to Mermaid Live Editor with your diagram pre-loaded. Validation of all diagram blocks in the active file.
Features
- 11 diagram templates — flowchart, sequence, class, ER, git graph, timeline, Gantt, pie chart, mind map, state diagram, C4 context
- Live preview — open any diagram in Mermaid Live Editor pre-loaded with your code
- Inline validation — count and list all mermaid code blocks in the active file
- SVG/PNG export guidance — instructions for mmdc CLI export
- Works in .md and .mmd files
Requirements
No external tools required for templates, preview, and validation. For local SVG/PNG export only: npm install -g @mermaid-js/mermaid-cli
Diagram Templates
flowchart — Decision flowsequence — Sequence diagramclassDiagram — OOP class hierarchyerDiagram — Entity relationshipgitGraph — Git branch visualizationtimeline — Project timelinegantt — Gantt chart with dependenciespie — Pie chartmindmap — Mind mapstateDiagram — State machinec4Context — C4 context diagram
Commands
| Command |
Description |
Mermaid Pro: Insert Diagram Template |
Insert a starter diagram |
Mermaid Pro: Preview Diagram at Cursor |
Open in Mermaid Live Editor |
Mermaid Pro: Export as SVG |
Instructions for mmdc CLI export |
Mermaid Pro: Validate All Diagrams in File |
Count and list all diagram blocks |
Explore more tools from the same suite:
| Extension |
Description |
Marketplace |
| AI Voice Reader |
Read files, selections, or documents aloud with Web Speech API |
Install ↗ |
| Brandfetch Logo Fetcher |
Fetch and insert brand logos from any domain — SVG, PNG, or Markdown |
Install ↗ |
| Dev Wellbeing |
Posture, eye-strain, and hydration reminders for long coding sessions |
Install ↗ |
| Focus Timer |
Pomodoro-style focus and break timer with status bar countdown |
Install ↗ |
| Gamma Slide Assistant |
Export Marp Markdown presentations to HTML and PDF |
Install ↗ |
| Hook Studio |
Visual editor for VS Code hook conditions and automation rules |
Install ↗ |
| Knowledge Decay Tracker |
Track staleness of documentation and flag overdue reviews |
Install ↗ |
| Markdown to Word |
Convert Markdown + Mermaid diagrams to .docx via Pandoc |
Install ↗ |
| MCP App Starter |
Scaffold Model Context Protocol servers in TypeScript, JavaScript, or Python |
Install ↗ |
| Mermaid Diagram Pro (this) |
Preview, export, and validate Mermaid diagrams in Markdown files |
Install ↗ |
| PPTX Builder |
Generate PowerPoint presentations from Markdown using pptxgenjs |
Install ↗ |
| Replicate Image Studio |
Generate images and videos with FLUX, SDXL, and WAN via Replicate API |
Install ↗ |
| SecretGuard |
Scan workspaces and files for accidentally committed secrets and keys |
Install ↗ |
| SVG to PNG |
Convert SVG files to PNG using resvg-js (Rust renderer, no ImageMagick) |
Install ↗ |
| SVG Toolkit |
Preview, copy as data URI, and validate SVG files in-editor |
Install ↗ |
| Workspace Watchdog |
Monitor file health, detect stalled work, and surface hot files |
Install ↗ |
License
MIT
| |
