Mermaid installs statistics

Mermaid extension for Visual Studio Code

The official Mermaid extension for Visual Studio Code enables developers to seamlessly create, edit, preview and integrate mermaid diagrams from within the VS Code. It's built by the team behind Mermaid.js.

Diagrams tend to go stale — the code moves on, and the diagram stays where someone left it. This extension generates diagrams from your code, fixes them when the syntax breaks, and offers to regenerate them when the code they describe changes, so your diagrams keep up with your code.

Which extension is right for you?

There are two Mermaid extensions for VS Code, and they do two different jobs:

• Mermaid (this extension): generate diagrams from your code, repair and improve them with AI, keep them in sync as your code changes, and share them with your team. Sign in with a free Mermaid account to get started.
• Mermaid Preview: our open-source previewer for diagrams you write by hand — live preview, export, and syntax highlighting. No account needed.

Feature	Mermaid	Mermaid Preview
Account	Free Mermaid account	Not needed
Live preview with pan and zoom	✓	✓
PNG and SVG export	✓	✓
Syntax highlighting and snippets	✓	✓
Mermaid rendering in Markdown preview	✓	✓
Generate diagrams from code with AI	✓
Repair and improve diagrams with AI	✓
Regenerate diagrams when your code changes	✓
Review diagram updates from Mermaid Diagram Sync	✓
Cloud sync and sharing	✓
Theme selector and custom export backgrounds	✓

Getting Started 🚀

1. Install Mermaid from Marketplace.
2. Open the Mermaid icon in the activity bar and click Sign in. No account yet? Click Create a free account to sign up at mermaid.ai, then come back to the editor.
3. Open a .mmd or .mermaid file, add a ```mermaid code block to any Markdown file, or mention @mermaid-chart in GitHub Copilot Chat and describe the diagram you want.

Signing in

OAuth is the default: click Sign in and finish in your browser. If you're in a remote environment, a different IDE, or a network where OAuth is blocked, use a token instead — generate one in your Mermaid account settings and paste it into the extension.

Note<br/> Diagram generation and @mermaid-chart run in GitHub Copilot Chat. Improve Diagram uses the VS Code Language Model API, so it works with any supported chat extension (for example, GitHub Copilot Chat or Cursor). Repair Diagram and diagram regeneration use AI credits from your Mermaid account.

Now with AI-Powered Diagramming! ✨

Transform ideas into diagrams instantly with our AI integration! Our extension now includes:

• AI-Powered Repair Diagram : In just one click repair your broken mermaid digram
• AI Chat Participant: Simply describe your diagram needs in natural language with @mermaid-chart and watch as beautiful diagrams materialize
• Smart Diagram Regeneration: Auto-detect changes in your source files and instantly update referenced diagrams with one click
• Pre-commit Diagram Regeneration: Automatically detects when staged source files are referenced by Mermaid diagrams and prompts you to regenerate them before committing
• AI-Powered ER Diagrams: Generate entity relationship diagrams from your codebase with simple commands
• AI-Powered Cloud Architecture: Visualize your cloud infrastructure automatically from configuration files
• AI-Powered Docker Diagrams: Create Docker architecture diagrams from your containerized applications
• AI-Powered Ownership Diagram: Visualize your code Ownership of each packages/folder form you project using the Git commit history
• AI-Powered Dependency Diagrams: Visualize all packages in your project, categorized by security issues, latest version status, and potential risks
• AI-Powered Sequence Diagrams: Generate execution sequence diagrams from your modular code, showing interactions between components, classes, and methods
• AI-Powered C4 Architecture Diagrams: Generate top-down C4 architecture diagrams from your codebase, visualizing system components and their relationships
• AI-Powered Generate Diagram from Code: Generate flowcharts, class diagrams, sequence diagrams, and more directly from your source code files
• Mermaid AI Skills for GitHub Copilot: Install workspace instructions so Copilot can call Mermaid extension commands (preview, repair, generate, sync, and more) when you need them

Note<br/> To use the AI diagramming feature, you must have the GitHub Copilot extension installed.

Mermaid Account Required 🔐

From v2.7.7, Mermaid is a signed-in extension. Creating, previewing, AI diagramming, cloud sync, Improve Diagram and Mermaid Sync review are all login gated, so you need a free Mermaid account to use them.

If you run a command while signed out, the extension shows a notification instead of running it, with three choices:

• Show more — opens an in-editor page explaining what changed
• Get the extension — Install Mermaid Preview in the Marketplace, so you can keep previewing diagrams without signing in
• Discard — dismisses the notification…