Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>Mermaid Charty Preview - 1.0New to Visual Studio Code? Get it now.
Mermaid Charty Preview - 1.0

Mermaid Charty Preview - 1.0

ZeWaka

|
67 installs
| (2) | Free
A fork of the Mermaid Preview extension for Visual Studio Code. Edit developers to view and edit diagrams stored in Mermaid charts within the Visual Studio Code. With integration to the Mermaid Chart service, this extension allows users to attach diagrams to their code. Gain quick access to edit dia
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Mermaid Charty Preview - 1.0 extension for Visual Studio Code

This is a fork of the original Mermaid Preview extension after the terrible 2.0 update.

I commit to never updating this extension, and deleting it if stops working for me.

This extension is a Tool for visualizing and editing Mermaid diagrams in Visual Studio Code.The extension enables developers to view and edit diagrams stored in Mermaid Chart from Visual Studio Code. 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.

Simplify your development workflow with the Mermaid Charty Preview extension.

Features

In the explorer view under the MERMAIDCHART section you will find all the diagrams you have access to. When you click on a diagram, that diagram will be inserted into the code editor at the position of the cursor. To get the latest changes of diagrams from Mermaid Chart, click on the button named Refresh in the explorer view.

Image illustrating accessible diagrams in explorer panel

You can attach diagrams into your code. The attachments are highlighted with an icon in the footer.

Image illustrating how a diagram is attached to the code

You have two links associated with he diagram, one for viewing the diagram in a new tab in Visual Studio Code and one that opens the diagram for editing at Mermaid Chart. This way it is easy to consume the diagram as well as updating it if some detail needs to be corrected.

The following image show how a new tab is opened with the diagram after clicking on the view diagram link:

Image illustrating the diagram view

The other link opens the diagram for editing in a browser window.

Image illustrating the editor

Requirements

The Mermaid Charty Preview extension for Visual Studio Code seamlessly integrates with the Mermaid Chart service, requiring an account to use. Choose between the free tier (limited to 5 diagrams) or the pro tier (unlimited diagrams). Collaborate by setting up teams and sharing diagrams within your development organisation. Simplify diagram management and enhance your workflow with Mermaid Charty Preview for Visual Studio Code.

Extension Settings

This extension contributes the following settings:

  • mermaidChart.baseUrl: This points to the instance of mermaid chart you are running, for the public service this is https://www.mermaidchart.com/.

Release Notes

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, yaml, etc.

1.0.1 - 2023-06-29

  • Added default value "https://www.mermaidchart.com" 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 Preview extension for Visual Studio Code.

Forked from: https://github.com/vstirbu/vscode-mermaid-preview/tree/9e7de6e390cc1dbec21c5abbb9ba0a09ce0ed9d3

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