Mermaid Chart extension for Visual Studio CodeThe official Mermaid extension for Visual Studio Code enables developers to seamlessly create, edit, preview and integrate mermaid diagrams from within the VS Code. Now with AI-Powered Diagramming! ✨Transform ideas into diagrams instantly with our AI integration! Our extension now includes:
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. FeaturesWorks with Latest Mermaid VersionWe 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 DiagramsCurrently supported diagrams and charts:
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. 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. Real-Time local Edit & PreviewNow 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 HighlightingWe 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. Pan & ZoomWe 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.
Error HighlightingWhile 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 filesThe extension automatically detects mermaid diagrams in the markdown files using the 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.
Support .mmd file extension as Mermaid Markdown fileNow 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 snippetsNow 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 HelpIf 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 MermaidChartWhen 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 www.mermaidchart.com Fetch & Use existing diagrams in Side PanelUsers 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.
Link diagram directly in your code filesFor each diagram in the Side Panel, user will see two options:
Smart Sync to promote collaborationWhen 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.
RefreshTo 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 ViewUsers now have the option to open and edit diagrams in the web view on www.mermaidchart.com 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
Extension SettingsThis extension contributes the following settings:
Release Notes2.2.0 -2025-04-07
2.1.3 -2025-04-03
2.1.2 -2025-03-26
2.1.1 - 2025-03-21
2.1.0 - 2025-03-21
2.0.4 - 2025-03-13
2.0.3 - 2025-03-05
2.0.2 - 2025-02-28
2.0.0 - 2025-02-28New General Features
1.0.3 - 2023-07-17
1.0.2 - 2023-07-14
1.0.1 - 2023-06-29
1.0.0 - 2023-06-26
|