Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Mermaid Diagram ProNew to Visual Studio Code? Get it now.
Mermaid Diagram Pro

Mermaid Diagram Pro

fabioc-aloha

| (0) | Free
Enhanced Mermaid diagram support — live preview, PNG/SVG export, diagram templates, and syntax validation
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Mermaid Diagram Pro

Mermaid Diagram Pro Banner

Enhanced Mermaid diagram support — templates, Mermaid Live preview, validation

VS Code

6 built-in diagram templates. Quick access to Mermaid Live Editor with your diagram pre-loaded. Validation of all diagram blocks in the active file.

Features

  • 6 diagram templates — flowchart, sequence, class diagram, git graph, ER, timeline
  • 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 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 export only: npm install -g @mermaid-js/mermaid-cli

Diagram Templates

  • flowchart — Decision flow
  • sequence — Sequence diagram
  • classDiagram — OOP class hierarchy
  • gitGraph — Git branch visualization
  • erDiagram — Entity relationship
  • timeline — Project timeline

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

🔷 CX Tools Suite

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

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft