Mermaid Editor

Seamlessly preview and edit Mermaid diagrams right inside Visual Studio Code.

Features

Live Preview: View a side-by-side Mermaid diagram preview that updates as you type.
Syntax Error Detection: Quickly spot syntax errors via the preview panel.
Offline Support: Renders diagrams offline using bundled dependencies.
Light/Dark Mode Support: Matches your VS Code theme.
Edit On UI: Edit your mermaid on UI and see code update.

Open a .mmd or .mermaid file.
Run the command Mermaid-Editor: Open Preview via the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).
Edit your mermaid code and see the diagram update live!

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
.vscode		.vscode
assets		assets
media		media
src		src
.gitignore		.gitignore
.vscode-test.mjs		.vscode-test.mjs
.vscodeignore		.vscodeignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
eslint.config.mjs		eslint.config.mjs
package-lock.json		package-lock.json
package.json		package.json
test.mmd		test.mmd
tsconfig.json		tsconfig.json
vsc-extension-quickstart.md		vsc-extension-quickstart.md