Mermaid Chart 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.

Getting Started 🚀

1. Install Mermaid Chart from Marketplace
2. Login using account for Mermaid Chart. Or create new 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

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

Now we offer a feature rich experience to create, visualize and edit Mermaid diagrams locally without needing to create any account. Made with ❤️ from the creators of Mermaid.js and we strive to provide the best Mermaid experience and provide regular updates.

Optionally, by creating a free MermaidChart account you can save and sync diagrams on the cloud, explore Mermaid AI, and experience the intuitive best-in-class drag-drop UI for Mermaid diagrams.

🔒 Privacy Policy & Data Collection

What Data Do We Collect?

This extension collects limited analytics data to improve functionality and user experience:

• Machine Identifier: A unique VS Code machine ID (vscode.env.machineId) is transmitted to mermaid.ai for analytics purposes
• Usage Analytics: Events such as extension activation, login/logout, AI feature usage, and error reports
• Diagram Types: Information about which types of diagrams are being created to improve our features

When Is Data Transmitted?

Data is automatically sent to https://mermaid.ai/ Servers when:

• The extension is activated/loaded
• You sign in or sign out of your Mermaid Chart account
• AI-powered features are used (chat participant, diagram generation, repair)
• Errors or exceptions occur

How Is Data Used?

• Service Improvement: To understand feature usage and improve extension functionality
• Error Tracking: To identify and fix bugs and technical issues
• Feature Analytics: To prioritize development of new features and improvements

Data Security & Privacy

• All data transmission occurs over secure HTTPS connections
• No personal files, diagram content, or source code is transmitted
• No personally identifiable information (PII) beyond the VS Code machine ID is collected

Your Control

Currently, analytics collection cannot be disabled within the extension settings. If you have privacy concerns, you may choose not to install or use this extension.

For questions about data collection or privacy practices, contact us at info@mermaidchart.com.

Features

Works with Latest Mermaid Version

We are the same team behind Mermaid.js, and our official extension works with the latest Mermaid version to provide support for new diagrams, enhancements and bug fixes.

Supported Diagrams

Currently supported diagrams and charts:

• Flowchart
• Sequence
• Block
• Class
• Entity Relationship
• Gantt
• Mindmap
• State
• Timeline
• Gitgraph
• C4
• Sankey
• Pie chart
• Quadrant
• Requirement
• User Journey
• Sankey
• XY chart
• Kanban
• Architecture
• Packet
• Radar

Sign-in & Authentication Support

Our extension supports flexible authentication options to seamlessly connect with your Mermaid Chart account, enabling advanced features like cloud synchronization, diagram sharing, and collaborative editing.

Dual Authentication Support

We provide two convenient authentication methods to accommodate different development environments and user preferences:

🌐 OAuth Authentication (Recommended)

• One-click sign-in: Simply click the "Sign-in" button and authenticate through your browser
• Automatic authentication: OAuth handles the entire authentication flow seamlessly

🔑 Manual Token Authentication

• IDE flexibility: Perfect for users working in different IDEs, remote environments, or corporate networks
• Troubleshooting alternative: When OAuth encounters issues or restrictions, manual token provides a reliable fallback
• Simple process:
  1. Visit your Mermaid Chart account settings
  2. Generate a new authentication token
  3. Copy and paste the token into the extension
• Persistent access: Once authenticated, no need to re-enter tokens or manage authentication manually

Generate AI-powered diagrams directly from your code!

Transform your ideas and source code into clear, insightful diagrams with our new AI integration in VS Code.
Just mention @mermaid-chart in any GitHub Copilot Chat and describe the diagram you want to create — even link specific source code files!
Whether it's a class diagram, sequence diagram, entity relationship diagram, or more — the AI assistant will analyze the code, generate the appropriate Mermaid syntax, and instantly show a live preview.
Let your code speak for itself — effortlessly.

With Smart Diagram Regeneration, when your source code or requirements change, the extension can detect these changes and offer to update related diagrams with a single click.

AI-Powered Repair Diagram

• Intelligent Error Detection & Repair: When syntax errors occur in your Mermaid diagrams, our AI automatically detects issues and offers instant repair suggestions.
  
• Credit-Based System: Uses AI credits directly from your Mermaid account - see your available credits displayed right in the error panel.
  
• Smart Diff Viewer: After AI repairs your diagram, view a comprehensive diff comparison showing exactly what changed.
  

Note
AI-powered repair diagram feature requires an active Mermaid account with available AI credits.

Improve Diagram

Refine existing diagrams with AI-suggested layout and styling improvements — without rewriting Mermaid from scratch. Improve Diagram adds quick actions at the top of every .mmd and .mermaid file and a dedicated Improve diagram view in the Mermaid activity bar, where you can compare alternatives side by side before applying them.

• Quick Actions via CodeLens: At the top of each diagram file, choose from Preview Diagram, Save Diagram to Mermaid Chart, Repair Diagram (for Mermaid syntax errors), or Improve Diagram — all without leaving the editor.
  
• Two AI-Powered Variants: The Improve sidebar generates two optimized suggestions for the active diagram: one focused on layout and grouping, and one on styling — giving you multiple variations of the same diagram to compare and choose from.
  
• Diff Preview Before You Apply: Click a suggestion card to open a code diff with dual diagram previews (current vs proposed). Review the changes visually, then save the right side to apply your chosen improvement to the workspace file.
  
• Model Selection: Choose which chat model powers generation (auto, claude, openAI availbel in your copilot plan) from a dropdown in the sidebar; your selection is remembered across sessions.
  
• Refresh & Cancel: Regenerate suggestions on demand with Refresh, or stop an in-flight request with Cancel.
  

Note
Improve Diagram uses the VS Code Language Model API. Install a supported chat extension (for example GitHub Copilot Chat or Cursor AI) and accept the permission prompt when the extension requests language model access.

Visualize Cloud Infrastructure from Your Codebase

• Instantly visualize your cloud infrastructure with our AI-powered diagram generator.
  
• Simply mention: @mermaid-chart /generate_cloud_architecture_diagram in GitHub Copilot Chat or MermaidChart: Generate Cloud Diagram in command pallet.
• it will scan your workspace, detect cloud configuration files, and generate a clear, accurate architecture diagram.
  
• Before generating, you can easily select the specific files you want to include, giving you full control over the output.
  
• Understand your cloud setup at a glance — no manual effort required.

Generate Entity Relationship Diagrams from Your Codebase

• Automatically create entity relationship diagrams from your database schemas and code structures.
  
• Simply mention: @mermaid-chart /generate_er_diagram in GitHub Copilot Chat to generate comprehensive ER diagrams.
  
• The AI analyzes your codebase to identify entities, relationships, and database structures, creating clear visual representations.
  
• Perfect for documenting database designs, understanding data relationships, and onboarding new team members.
  
• Visualize your data architecture effortlessly — from code to diagram in seconds.

Generate Docker Architecture Diagrams

• Visualize your containerized applications and Docker infrastructure with AI-powered diagram generation.
  
• Simply mention: @mermaid-chart /generate_docker_diagram in GitHub Copilot Chat to create detailed architecture diagrams.
  
• Automatically detects and analyzes Docker-related files including Dockerfiles, docker-compose.yml, and stack files.
  
• Before generating, you can select specific Docker configuration files to include in your diagram.
  
• Understand your containerized architecture at a glance — perfect for documentation and team collaboration.

Generate Code Ownership Diagrams

• Code ownership analysis provides a visual representation of team contributions to specific files or packages, helping identify maintainers and streamline collaboration.
• Simply mention : @mermaid-chart /analyze_code_ownership in GitHub Copilot Chat
• The AI scans your workspace, analyzes file structures, and identifies ownership metadata such as authorship, contributors, and maintainers using commit history from Git.
  
• Select specific time frames (e.g., 1 month, 3 months, 6 months, or 12 months) to focus on recent or historical contributions.
  
• Ownership is displayed for each package, with nodes color-coded based on contribution levels:
  • 🟢 Green – Actively Maintained
  • 🟠 Orange – Moderately Maintained
  • 🟡 Yellow – Lightly Maintained
  • ⚪ No color – Unmaintained
    
• Perfect for understanding team responsibilities, improving collaboration, and streamlining code reviews.
  
• Visualize code ownership effortlessly — from codebase to diagram in seconds.

Generate Dependency Diagrams from Your Codebase

• The Dependency Diagram provides a visual overview of all packages used in your project, highlighting their security and update status. It categorizes dependencies based on their version lag and known vulnerabilities, helping teams identify potential risks and prioritize updates effectively.
  
• Simply mention: @mermaid-chart /generate_dependency_diagram in GitHub Copilot Chat.
• The AI scans your workspace, analyzes dependency files (e.g., package.json, pom.xml, requirements.txt), and generates a detailed diagram of all packages.
  
• Each dependency is categorized based on Version & Vulnerability Analysis:
  • 🟢 Good – Up-to-date and secure packages
  • 🔵 Low – Slightly outdated but no critical issues
  • 🟡 Medium – Multiple versions behind or moderate vulnerabilities
  • 🟠 High – Known high-severity vulnerabilities
  • 🔴 Critical – Severe vulnerabilities or abandoned packages
    
• The diagram helps development and security teams maintain package health, prevent exploits, and streamline dependency management.
  
• Visualize your dependency health effortlessly — from codebase to diagram in seconds.

Generate Execution Sequence Diagrams from Modular Code

• Transform your complex codebase into clear, visual sequence diagrams that show how your components interact and communicate with each other.
  
• Simply mention: @mermaid-chart /generate_execution_sequence in GitHub Copilot Chat to automatically analyze your code structure and generate comprehensive sequence diagrams.
  
• The AI intelligently follows a structured workflow:
  • Shows a popup for interactive file selection
  • Analyzes chosen files to understand connections and patterns between functions
  • Creates sequence diagrams showing detailed interaction and execution flow
    
• Perfect for documenting complex workflows, understanding system architecture, improving code maintainability.
  
• Visualize your code execution effortlessly and enhance your development workflow.

Generate C4 Top-Down Architecture Diagrams from Your Codebase

• Automatically create comprehensive C4 architecture diagrams that visualize your entire system's structure, components, and relationships.
  
• Simply mention: @mermaid-chart /generate_c4_topdown_architecture in GitHub Copilot Chat to scan and analyze your codebase.
  
• The AI intelligently follows a structured workflow:
  • Scans your entire codebase to identify components, modules, and services
  • Understands the relationships and dependencies between different parts of your system
  • Creates C4 diagrams showing system context, containers, components, and their interactions
    
• Perfect for system documentation, architectural reviews, onboarding new team members, and maintaining architectural clarity.
  
• Visualize your entire system architecture from top-down perspective effortlessly.

Generate Mermaid Diagrams from Your Code Files

• Turn source code into Mermaid diagrams with AI — analyze components, relationships, and structure, then generate the diagram.
  
• CodeLens (enabled by default): When you open a supported code file (e.g. .ts, .js, .py, .java, .go, .rs, .cs), two CodeLens actions appear at the bottom of the file:
  • ▷ Generate Mermaid Diagram — opens GitHub Copilot Chat and runs @mermaid-chart /generate_diagram_from_code
  • 💬 Open Chat @mermaid-chart — opens Copilot Chat with @mermaid-chart ready to use
    
• Command palette: Run MermaidChart: Generate Diagram from Code from any supported code file to start the same workflow without using CodeLens.
  
• How it works: The /generate_diagram_from_code handler lets you select code files to analyze, then shows a list of suitable diagram types (flowchart, class diagram, sequence diagram, state diagram, ER diagram, architecture diagram, mindmap, and more). Once you pick a type, the AI analyzes components, relationships, and flow in your code and generates a Mermaid diagram.
  
• Turn off CodeLens: If you prefer not to see CodeLens on code files, open VS Code Settings, search for Mermaid Chart: Show Generate Diagram Code Lens, and uncheck it.

Real-Time local Edit & Preview

Now you get a side-by-side real time preview of the mermaid diagram while editing the diagram locally. This helps the user to see the true power of a mermaid's text-based diagram, where each change in text is reflected immediately on the diagram.

Syntax Highlighting

We now support syntax highlighting for all Mermaid diagrams when writing the Mermaid code. The syntax highlighting works well with the developer selected theme for VS Code.

The extension also provides syntax highlighting for Mermaid diagrams embedded in Markdown files, with specific highlighting based on diagram types.

Pan & Zoom

We now support Pan and Zoom for the diagram preview, where the user pan to a specific part of a large diagram, and also set different levels of zoom based on his preference. We implemented the zoom with stickiness, so that zoom levels are not changed when you edit your diagram Users can of course use the reset option to resize the preview diagram to fit the screen.

Theme Selector

Change diagram themes instantly during your current session with our new theme selector feature. This makes it easy to:

• Preview diagrams with different visual styles
• Find the perfect theme for your documentation
• Switch between light and dark themes based on your preference
• Apply changes in real-time without reloading

All Mermaid Chart themes are supported including: Mermaid Chart, Neo, Neo Dark, Default, Forest, Base, Dark, Neutral, Redux Dark, Redux Color, and Redux Dark Color.

Simply click the palette icon next to the export button to access the theme dropdown.

VS Code Theme Integration for Preview Panel

we've enhanced preview panelkby automatically synchronizing the preview panel UI with your active VS Code theme while keeping diagram backgrounds independent.

• Smart Theme System with Dynamic Color Adaptation – Both the sidebar buttons and UI elements now intelligently adapt to match your VS Code theme: 🎨 Diagram backgrounds follow the selected Mermaid theme (dark/light/redux etc.) 🖌️ Preview panel UI matches your VS Code theme colors (kimbie, solarized, Monokai, Red, etc.) ⚪ All components automatically adjust

Export Diagrams

Export your diagrams easily in both SVG and PNG formats with enhanced customization options. This makes it simple to:

• Include diagrams in documentation
• Share with team members
• Use in presentations
• Version control your diagram assets

New Export Features:

• Background Color Options: Choose between Auto (follows VS Code theme), Light, Dark, or Custom (pick any color)
• Custom Color Picker: Select any background color using an intuitive color picker

The exported files maintain high quality and can be used across different platforms and tools with your preferred background styling.

Error Highlighting

While writing the mermaid code, if you encounter syntax errors, the extension highlights the syntax error with an error message, and also indicates which line in the code might be causing the error. This helps the user to locate and fix the error.

Auto-Detect Mermaid diagrams in Markdown files

The extension automatically detects mermaid diagrams in the markdown files using the mermaid code block.

This gives a unique opportunity for the users, they can now preview and edit the diagrams by clicking the edit diagram link directly from within the markdown file.

Mermaid Diagram Preview in Markdown File

This extension enables live preview of Mermaid diagrams directly within the Markdown preview in VS Code. No need to leave your editor!

Support .mmd file extension as Mermaid Markdown file

Now we provide native support for the .mmd extension. All the local mermaid diagrams will be loaded as a .mmd file. You can notice that the .mmd also has the Mermaid logo in the file explorer view.

Smart Auto-Suggest with code snippets

Now based on the diagram type auto suggestions for code snippets will be triggered on type of "m", and it will start showing relevant code snippets shorthand, that once selected, will expand to the proper code snippet.

Diagram Help

If you get stuck with a diagram's syntax or want to learn about other features for a given diagram, now you can directly access the respective diagram's detailed documentation on the official mermaid.js docs.

Advanced Features when linking with MermaidChart

When you connect the extension with the MermaidChart account to explore some of the advanced features. With the integration to the Mermaid Chart service, this extension allows users to attach diagrams to their code and to gain quick access to updating diagrams.

You can explore all the these options by signing-up for a free account on https://mermaid.ai

Fetch & Use existing diagrams in Side Panel

Users can start login flow with their Mermaid Chart account and once logged-in, in the side panel all the projects and diagrams from your account will be loaded in the side panel.

Enhanced Diagram Management with Context Menu

Manage your Mermaid diagrams effortlessly with our comprehensive right-click context menu. Right-click on any diagram in the Side Panel to access all available options:

Diagram Operations:

• Link Diagram: Insert the diagram ID into your code editor as a comment at the cursor position for easy reference
• View Diagram: Preview the diagram directly in VS Code
• Edit in Mermaid Chart: Open the diagram in the web editor at mermaid.ai for advanced editing
• Edit Locally: Open the diagram locally for editing while maintaining sync with Mermaid Chart

Management Options:

• Rename: Change the diagram name with a custom title
• Delete: Remove unwanted diagrams from your workspace
• Duplicate: Create a copy of the diagram for variations or backup

Quick Add Diagram Feature: Use the + button at the project level to quickly add new diagrams to your workspace.

Smart Sync to promote collaboration

When a user modifies an existing diagram, before saving it to MermaidChart service, it smartly checks if any modification is made in the web view, and if found, it indicates to the user to resolve any conflicts, and then save the resolved diagram back.

Remote Sync Diagram Diff Preview

• Visual Change Comparison: When using remote sync functionality, instantly see what changed with side-by-side diagram previews.
  
• Dual Preview Mode: View both original and updated diagrams simultaneously to understand the impact of changes.
  
• Interactive Diff View: Navigate between changes with clear visual indicators showing additions, modifications, and deletions.
  

Pre-commit Diagram Regeneration

Keep your Mermaid diagrams in sync with your code — automatically, before every commit.

• Automatic Staging Detection: Whenever you run git add, the extension watches for staged source files that are referenced by any .mmd or .mermaid diagram in your workspace. No manual trigger needed.
  
• Smart Notification Popup: As soon as relevant staged files are detected, a VS Code notification appears listing the affected diagrams and asking whether you want to regenerate them using Mermaid AI — right before you commit, so your diagrams never lag behind your code.
  
• Powered by Mermaid AI: Clicking Regenerate calls the Mermaid AI regeneration API. The updated diagram is written back to file automatically. AI credits are deducted the same way as in the Mermaid Diagram Sync GitHub App.
  
• Intelligent Skip Logic: If a diagram file is already staged (already regenerated and added) or has unstaged modifications, it is skipped automatically no duplicate work, no unwanted overwrites.
  
• Login Prompt: If you are not signed in to Mermaid Chart, the popup offers a quick login link instead of regenerating.
  
• Opt-out Anytime: Can be turned off via Settings → Mermaid Chart: Pre Commit Sync Enabled.
  

This is a focused, local version of Mermaid diagram sync. It regenerates diagrams based on your current staged changes only. For full pull-request-level diagram synchronization across your entire repository use the Mermaid Diagram Sync GitHub App.

Regenerate Diagram with Diff Preview

• Source File Integration: When you create a .mmd file using any source file with our Mermaid handler, references get added to the front matter.
  
• Smart Change Detection: When you change your source file code, we provide a regenerate diagram option that reflects the same changes to the Mermaid diagram.
  
• Diff Preview Visualization: Includes diagram diff preview to help you understand exactly what changed before applying updates.
  
• Synchronized Updates: Ensures your diagrams stay synchronized with your evolving codebase through intelligent change tracking.
  

Review Mermaid Sync

MermaidChart: Review Mermaid Sync helps you review diagram changes on your pull request that were committed by the Mermaid Diagram Sync GitHub App. To learn how the app works, what it updates, and how .mermaidignore fits in, see the Mermaid Diagram Sync marketplace page.

Before you start: Install the GitHub App on your repo, open a branch that has an open pull request, and run MermaidChart: Connect GitHub for Mermaid Diagram Sync once so the extension can load PR base and head content from GitHub.

Automatically review after git pull

When you run git pull on the current branch and new commits from the Mermaid Sync GitHub App are pulled into your workspace, the extension detects diagram files (.mmd / .mermaid) updated in those commits only and adds them to review.

For example, if a recent source change removes a function and the app regenerates a diagram in the commits you just pulled, review focuses on that pull’s diagram updates—not every app commit on the branch.

Full PR review mode

When you want to see all app-driven diagram changes on the current branch for the open PR, run MermaidChart: Review Mermaid Sync from the Command Palette. That scans from the PR base through HEAD and registers every affected diagram file for review. Use this when you need the full picture, not only what arrived in the last pull.

Highlighted files

Diagram files in active review are marked in the editor and Explorer so you can see which paths still need attention.

Per-file actions (CodeLens)

Open a highlighted file to use:

Action	What it does
Review Changes	Custom diff with side-by-side diagram previews (Mermaid sync app version vs before the app change).
Accept	Keep the app-generated diagram content.
Reject	Restore the file to the version from before the Mermaid sync app commit.
Commit Changes	Commit your outcome for that file. You may be asked to add the diagram path to .mermaidignore in the same commit.

.mermaidignore on commit

If a path is not in .mermaidignore, the GitHub app can regenerate that diagram when related source files change on the PR and overwrite your edits. Adding the path in the commit prompt helps you keep manual diagram changes. Syntax and examples are on the app marketplace page.

Diagram diff UI upgrade

The Review Changes experience has been upgraded with a refreshed diagram diff UI—clearer change summaries, an easier-to-scan changes list, and a more visual layout so you can compare the app proposal with the previous version at a glance. See the demo below.

Mermaid Sync Review List

When review is triggered (manually or after a git pull with Mermaid Sync updates), a Review Mermaid Sync view appears in the Mermaid activity bar. It lists every affected .mmd and .mermaid file in one place—so you can review all bot-driven diagram changes without opening the Explorer file by file.

Each file shows a Git-style status badge:

• M — Pending review / modified during review
• A — Accepted
• R — Rejected

Per-file actions (from the sidebar)

For each diagram in the list, you can:

• Accept — Apply the bot's proposed content to the workspace file
• Reject — Restore the pre-sync version
• Close — Remove that file from the review session (without reverting content)
• Open the file — Jump into the editor for the full review flow (diagram preview, diff, CodeLens options, etc.)

Bulk actions (login required)

The following bulk actions are gated behind Mermaid Chart login:

• Accept All — Accept bot changes across every file in the review list
• Reject All — Reject and restore all files in one step
• Close Review — End the entire review session and clear the list
• Open Changes — A Git-style unified changes view showing all diagram diffs in a single editor, so you can scan and compare every file without opening them one by one. Per-row accept/reject actions are also available in this view.

Diagram Diff Highlighting

• Enhanced Visual Clarity: Our diagram diff previews now include advanced change highlighting to make differences even more visible and understandable.
  
• Color-Coded Changes:
  • 🟢 Added elements are highlighted in green
  • 🟡 modified elements in yellow
  • 🔴 deleted elements highlighted in red, with precise highlighting that doesn't obscure diagram text.
    
• Available in Two Scenarios:
  • Remote Sync: When you connect your diagrams to Mermaid Chart and make changes remotely, the diff preview shows highlighted differences
  • Regenerate Diagram: When you modify source files and regenerate diagrams, see exactly what changed with diagram highlighting
    
• Supports Two Diagram Types: Works seamlessly with flowchart and sequence diagrams

Flowchart Diagram Highlighting Example:

Sequence Diagram Highlighting Example:

Refresh

To get the latest changes of diagrams from Mermaid Chart, click on the button named Refresh at the top in the side panel.

Open in Web View

Users now have the option to open and edit diagrams in the web view on https://mermaid.ai in the browser. This will enable them to use the best-in-class Visual Editor with drag and drop interface to modify the diagram, Mermaid AI, use diagrams in Presentations etc

Commands

Command	Description
MermaidChart: Create Diagram	Creates a new Mermaid diagram in the editor.
MermaidChart: Login	Logs in to the Mermaid Chart service to access and manage diagrams.
MermaidChart: Logout	Logs out from the Mermaid Chart service..
MermaidChart: Sync Diagram	Synchronizes the current diagram with Mermaid Chart..
MermaidChart: Preview Diagram	Opens a preview of the selected Mermaid diagram within the editor.
MermaidChart: Improve Diagram	Opens the Improve diagram sidebar and generates two AI layout/styling variants for the active .mmd / .mermaid file (also available via CodeLens).
MermaidChart: Repair Diagram	Repairs Mermaid syntax errors in the active diagram using Mermaid AI (also available via CodeLens).
MermaidChart: Review Mermaid Sync	Scans the current branch PR for Mermaid Diagram Sync app commits and registers diagram files for review.
MermaidChart: Connect GitHub for Mermaid Diagram Sync	Signs in to GitHub (repo scope) to load PR base/head content for app review.
MermaidChart: Disconnect GitHub for Mermaid Diagram Sync	Clears this extension’s GitHub connection for app review (does not sign you out of GitHub in VS Code).
MermaidChart: Commit App Review	Commits reviewed diagram changes for the active file; optionally adds paths to .mermaidignore.
MermaidChart: Accept App Review / Reject App Review	Accept or reject the app proposal for the file under review (also available via CodeLens).
MermaidChart: Generate Diagram from Code	Opens GitHub Copilot Chat and runs @mermaid-chart /generate_diagram_from_code to generate a Mermaid diagram from the active code file.

Extension Settings

This extension contributes the following settings:

• mermaidChart.baseUrl: This points to the instance of the mermaid chart you are running, for the public service this is https://mermaid.ai/.
• mermaidChart.showGenerateDiagramCodeLens: Show "Generate Mermaid Diagram" and "Open Chat @mermaid-chart" CodeLens at the bottom of supported code files (default: true). Set to false to hide CodeLens
• mermaid.vscode.dark: Defines the theme used for Mermaid diagrams when VS Code is in dark mode.
• mermaid.vscode.light: Defines the theme used for Mermaid diagrams when VS Code is in light mode.
• mermaid.vscode.maxZoom: Sets the maximum zoom level for diagram preview (default: 10).
• mermaid.vscode.maxCharLength: Sets the maximum text size limit for diagrams.
• mermaid.vscode.maxEdges: Sets the maximum number of edges allowed in a diagram.
• mermaid.vscode.aiExportName: Determines whether to use GitHub Copilot to generate a name for the exported diagram.

Release Notes

2.7.1 - 2026-06-23

• Added Mermaid Sync Review List — sidebar listing all bot-updated diagrams with M / A / R badges, per-file accept/reject/close, and bulk Accept All, Reject All, Close Review, and Open Changes (login required for bulk actions).

2.7.0 - 2026-06-16

• Added Improve Diagram — CodeLens commands at the top of .mmd / .mermaid files (Preview Diagram, Save Diagram to Mermaid Chart, Repair Diagram, Improve Diagram).
• Improve Diagram opens a sidebar view that generates two AI variants (layout/grouping and styling), with model selection, diff preview, and dual diagram previews before applying changes.
• Updated diagram diff UI for review Mermaid sync command

2.6.9 - 2026-06-9

• Fixed an bug where Mermaid diagrams were not rendering correctly in Markdown files

2.6.7 - 2026-05-29

• Added Generate Mermaid Diagram from Code — This command appears at the bottom of supported code files, or you can directly use @mermaid-chart /generate_diagram_from_code to select files, choose a diagram type, and generate Mermaid diagrams using AI.
• Added Review Mermaid Sync — Provides highlight, diff preview, accept, reject, and commit actions for .mmd/.mermaid files updated by the Mermaid Diagram Sync GitHub App; Also includes automatic detection after git pull and support for MermaidChart: Connect GitHub for Mermaid Diagram Sync for PR-aware reviews.
• Added Pre-commit Diagram Regeneration —When source files linked to Mermaid diagrams are staged using git add, Mermaid Chart prompts you to regenerate affected diagrams with AI before committing. This can be disabled via Settings → Mermaid Chart: Pre Commit Sync Enabled

2.6.6 - 2026-05-5

• remove the login pop-up

2.6.5 - 2026-04-29

• Enhanced VS Code theme integration with automatic preview panel UI synchronization

2.6.4 - 2026-04-16

• Added Diagram Diff Highlighting for Remote Sync and Regenerate Diagram features. it's Enhanced dual preview mode with precise highlighting for both flowchart and sequence diagrams

2.6.3 - 2026-04-09

• Enhanced diagram management with comprehensive right-click context menu
• Moved Link Diagram functionality from hover to right-click menu for better accessibility
• Removed "Use Diagram" option for simplified workflow
• Consolidated all diagram operations (Link, View, Edit in Mermaid Chart, Edit Locally) into right-click context menu
• Added Duplicate diagram, Delete diagram, Rename diagram option to context menu
• Added project-level add diagram button (+) for quick diagram creation

2.6.2 - 2026-03-27

• Added privacy policy and data collection documentation detailing user data usage and analytics practices

2.6.0 - 2026-03-09

• Updated preview panel design and it also dynamically adapt to both diagram themes and VS Code themes for better visual consistency.
• Added copy PNG and SVG functionality directly within the export modal, allowing users to copy diagrams to clipboard without downloading.
• Introduced rename and delete options for Mermaid diagram links — right-click on any diagram in the list to access a context menu for renaming or deleting diagrams directly from VS Code.

2.5.9 - 2026-02-26

• Updated authentication to support both OAuth and manual token flows.
• Added Repair Diagram with Mermaid AI — when a diagram throws an error, users can run the repair command to fix it using Mermaid AI. It also displays the user’s remaining AI credits.
• Added 2 preview support for Regenerate and Remote Sync, allowing users to visualize diagram differences.
• Improved the login UI design to make it more user-friendly.

2.5.6 - 2025-12-04

• Added theme selector in preview allowing users to change diagram themes in real-time during current session
• Enhanced export functionality with custom background color selection for diagram exports

2.5.5 - 2025-11-24

• Added new AI feature Generate C4 Top-Down Architecture Diagrams
  • Command to use @mermaid-chart /generate_c4_topdown_architecture
  • Scan your entire codebase to understand components and relationships
  • Create C4 diagrams showing system architecture, containers, components, and their interactions visually

2.5.4 - 2025-11-04

• Added new AI feature Generate Execution Sequence Diagrams
  • Command to use @mermaid-chart /generate_execution_sequence
  • Generate detailed sequence diagrams from modular code showing interactions between components, classes, and methods

2.5.3 - 2025-10-23

• Bug fix for markdown strings
• Bug fixes for smart sync diagrams

2.5.2 - 2025-08-11

• Added new AI feature Generate Code Ownership Diagrams

  • Command to use @mermaid-chart /analyze_code_ownership

• Added new AI feature Generate Dependency Diagrams from Your Codebase

  • Command to use @mermaid-chart /generate_dependency_diagram

2.5.1 - 2025-07-22

• Bug fix

2.5.0 - 2025-07-17

• Added new AI feature Generate Entity Relationship Diagrams
• Added new AI feature Generate Docker Architecture Diagrams
• Use @mermaid-chart /generate_er_diagram to generate ER diagrams from your codebase
• Use @mermaid-chart /generate_docker_diagram to generate Docker architecture diagrams from Docker-related files

2.4.1 -2025-06-11

• Command bug fixed

2.4.0 -2025-06-04

• Added new AI feature Generate Cloud Architecture Diagram
• Use @mermaid-chart /generate_cloud_architecture_diagram to generate cloud diagram or MermaidChart: Generate Cloud Diagram

2.3.0 -2025-05-13

• Added export functionality for SVG and PNG formats
• Added support for additional icon packs:
  • Logos (from iconify-json/logos)
  • Material Design Icons (MDI)
• Added syntax highlighting for markdown mermaid blocks based on diagram types
• Performance improvements and bug fixes
• Added configurable maximum zoom level setting
• Added settings for maximum text size and edges in diagrams

2.2.5 -2025-04-30

• Refined authentication behavior to remove unnecessary login prompts and Account badge indicators, ensuring a less intrusive experience.

2.2.4 -2025-04-29

• Supports latest Mermaid version
• Bug Fixes

2.2.3 -2025-04-22

• Added support to render Mermaid diagrams directly in the VS Code Markdown preview, replacing the raw Mermaid code blocks
• Added support for redux-color & redux-dark-color theme

2.2.2 -2025-04-16

• Supports latest Mermaid version

2.2.1 -2025-04-14

• Bug Fixes

2.2.0 -2025-04-07

• Added three specialized AI tools for improved Mermaid diagramming:
  • Syntax Documentation Tool: Provides instant access to detailed diagram syntax guides
  • Diagram Validation Tool: Ensures correct syntax before rendering diagrams
  • Diagram Preview Tool: Streamlined visualization of Mermaid diagrams
• Enhanced VS Code Agent Mode with dedicated Mermaid tools for improved accuracy
• Improved AI chat participant capabilities with documentation-powered responses
• Better integration with GitHub Copilot Chat for more reliable diagram generation

2.1.3 -2025-04-03

• Bug fixes

2.1.2 -2025-03-26

• Supports mermaid 11.6.0
• Renamed Update Diagram with Latest Changes to Regenerate Diagram
• Added Redux as Default Theme

2.1.1 - 2025-03-21

• Bug fix for Ai chat requests

2.1.0 - 2025-03-21

• Added AI-powered diagramming capabilities
• Introduced AI chat participant with @mermaid-chart command
• Added smart diagram regeneration based on source file changes

2.0.4 - 2025-03-13

• Supports mermaid 11.5.0

2.0.3 - 2025-03-05

• Fixed performance issues with auto-save
• Improved handling of save operations for Mermaid files

2.0.2 - 2025-02-28

• Broken images fix

2.0.0 - 2025-02-28

New General Features

• Real-Time Local Edit & Preview

• Syntax Highlight for all Mermaid diagrams

• Pan & Zoom for diagram preview

• Error Highlighting

• Auto-detech .mmd file extension

• Handle Mermaid diagram in Markdown files

• Support for Code Snippets

• Diagram Help to link directly to official documentation

• New features for LoggedIn Users

• Smart sync & Save

• Refresh diagram

• Dependency Update

• Upgraded to latest Mermaid version v11.4.1

• Added OAuth support for the MermaidChart plugin.

1.0.3 - 2023-07-17

• Added OAuth support for the MermaidChart plugin.

1.0.2 - 2023-07-14

• Added support for multiple languages including python, markdown, yamletc.

1.0.1 - 2023-06-29

• Added default value "https://mermaid.ai" for baseUrl configuration setting.
• Corrected inserted label in editor code.
• Added info in README.md about the MERMAIDCHART field in the explorer view.

1.0.0 - 2023-06-26

• Initial release of the Mermaid Chart extension for Visual Studio Code.