Mermaid Studio
Offline diagrams for VS Code. Version 0.1.0. Publisher digivibetech.
Lite is free and useful on its own: a side-by-side preview for .mmd, .mermaid, and Markdown ```mermaid fences. The renderer is mermaid.js bundled inside the extension. The webview content security policy does not name a remote host, and the page replaces fetch so a diagram cannot call the network. There is no telemetry and no account.
Lite
- Live preview beside the editor, including every diagram type in the bundled mermaid.js
- Syntax highlighting for
.mmd / .mermaid, plus highlighting inside Markdown mermaid fences
- Error markers while the preview is open, using the line reported by the renderer
- Zoom, pan, fit, and reset
- Copy one diagram as SVG, with no watermark
- Light, dark, and high-contrast chrome that follows the VS Code theme
- Sample gallery: Mermaid Studio: Open Sample Gallery
Pro
Pro is a local flag. Start a 14-day trial with Mermaid Studio: Start Pro Trial. The clock is stored in extension state on this machine. The trial does not call the network. Lite does not expire.
Mermaid Studio: Enter Licence Key stores a key and checks a local format checksum on this machine. It does not contact a licence server and is not a payment checkout.
When Pro is on:
| Command |
What it does |
| Open Graphviz Preview |
Renders .dot, .gv, and ```dot / ```graphviz fences with bundled @hpcc-js/wasm-graphviz |
| Open D2 Preview |
Tells you D2 is not bundled in this version. It does not render and does not call the network |
| Export SVG / Export PNG |
Save dialog. PNG asks for scale (1x, 2x, 3x) and background (transparent, white, or editor theme) |
| Batch Export Folder |
Writes SVG and/or PNG for Mermaid and Graphviz files under a folder |
| Diagram Appearance |
Named themes, hand-drawn look, ELK layout, plus mermaidStudio.themeVariables |
| Sync Agent Rules |
Previews a diff, then writes AGENTS.md, .cursor/rules/*.mdc, and .github/copilot-instructions.md from one source file |
Excalidraw is not in this version.
Try it
- Install Mermaid Studio from the Visual Studio Marketplace or Open VSX.
- Open a
.mmd file or a Markdown file with a ```mermaid fence.
- Run Mermaid Studio: Open Preview (Ctrl+Alt+M, or Cmd+Alt+M on macOS).
The diagram appears beside the editor. Switch the colour theme and the preview follows. Break a line and the preview reports the error on that line. Mermaid Studio: Copy Diagram as SVG puts the markup on the clipboard.
examples/sequence.md (in the extension folder) is a Markdown file with mermaid fences. examples/graph.dot is the Graphviz sample (Pro).
Agent rules source
Default path: agent-rules.md in the workspace root (mermaidStudio.agentRulesSource).
---
cursorFile: project.mdc
cursorDescription: Project conventions
cursorGlobs: "**/*"
cursorAlwaysApply: true
---
Shared guidance written into all three targets.
Mermaid Studio: Sync Agent Rules shows the diff first. Nothing is written until you choose Write files. A missing source file can be created as a starter; that step does not write the three targets yet. examples/agent-rules.md is a sample source.
Limits
- D2 rendering is not included. The official offline D2 WASM package unpacks to about 96 MB, which is too heavy for this VSIX. The Pro command says so and stops.
- Excalidraw is out of scope for v1.
- The licence key is a local format check. There is no payment provider and no key server. Clearing the extension's global state resets the trial.
- Error markers are updated from the preview renderer. They appear while the preview is open.
- The TextMate grammars cover the common keywords. They are not a full language server.
- Export re-renders Mermaid with
htmlLabels: false so the SVG is easier to rasterize. PNG still depends on the webview canvas. Diagrams that rely on HTML inside the SVG can look different in PNG than in the preview.
- Some Mermaid diagram icons are normally downloaded. This preview blocks that, so those icons can be missing. The diagram text still renders.
- Graphviz is the bundled WASM build (
@hpcc-js/wasm-graphviz), not a system dot binary. Unusual DOT features can differ.
- ELK and the hand-drawn look ship in the extension but only apply when Pro is on. Lite always uses the classic look, dagre layout, and the matching light or dark theme.
- Files over 500 KB are refused by the preview.
- Batch export skips
.d2 and stops after 200 source files, six folders deep. It skips node_modules, out, media, and dot-directories.
- There is no telemetry. The render path does not use mermaid.live or a CDN script.
Third-party code inside the VSIX keeps its own licence: Mermaid (MIT), @hpcc-js/wasm-graphviz (Apache-2.0), and ELK (via @mermaid-js/layout-elk).
Support: https://digivibetech.com/support/
