Nifty Mermaid
Mermaid diagrams with no account: live preview beside .mmd files and Markdown, diagrams in the Markdown preview, syntax highlighting, and export to SVG or PNG.
Maintained. No sign-in. No telemetry. Works in VS Code, Cursor, Windsurf, VSCodium and other editors that use Open VSX.
Features
- Live preview beside the editor. Open a
.mmd or .mermaid file and press Ctrl+K V (or the preview button in the title bar). The diagram redraws as you type. Zoom with the buttons or Ctrl+mouse wheel.
- Diagrams in Markdown.
```mermaid blocks render in VS Code's own Markdown preview. In the editor, each block gets Preview diagram · Export SVG · Export PNG links, and the side preview follows your cursor from diagram to diagram.
- Errors where they are. A syntax error is shown in the preview and marked on the right line of your file, in plain words ("unexpected end of diagram; expected LINK, …").
- Export any diagram to SVG or high-resolution PNG (2× by default, white or transparent background), or copy the SVG to the clipboard.
- Every diagram type that Mermaid 12 supports: flowcharts, sequence, class, state, ER, Gantt, pie, mind maps, timelines, git graphs, C4, quadrant, XY, Sankey, block, packet, kanban, architecture and more.
- Syntax highlighting and snippets for
.mmd files and ```mermaid blocks in Markdown, with snippets for the common diagram types.
- Matches your theme. Diagrams use Mermaid's dark theme in dark editors, or the theme you pick. A
%%{init}%% directive in a diagram still wins.
- No account, no cloud. Everything renders locally; nothing is uploaded.
- Works in the browser on vscode.dev and github.dev.
- Mermaid only. For PlantUML, Graphviz (DOT) and D2 diagrams, use Nifty Diagrams, which renders them on your machine the same way.
Commands
| Command |
What it does |
Nifty Mermaid: Open Preview to the Side |
Preview the file, or the Markdown diagram at the cursor (Ctrl+K V in .mmd files) |
Nifty Mermaid: Export Diagram as SVG |
Save the diagram as an SVG file |
Nifty Mermaid: Export Diagram as PNG |
Save the diagram as a PNG image |
Nifty Mermaid: Copy Diagram as SVG |
Copy the SVG markup to the clipboard |
Settings
| Setting |
Default |
What it does |
nifty.mermaid.theme |
auto |
auto (follow the editor), default, dark, forest, neutral or base |
nifty.mermaid.markdownPreview |
true |
Render ```mermaid blocks in the Markdown preview |
nifty.mermaid.codeLens |
true |
Preview and export links above Markdown diagrams |
nifty.mermaid.exportBackground |
white |
PNG background: a CSS colour or transparent |
nifty.mermaid.pngScale |
2 |
Pixel density of PNG exports |
nifty.mermaid.renderDelay |
300 |
Milliseconds after typing before the preview redraws |
Install
- VS Code: search for "Nifty Mermaid" in the Extensions view, or install from the Visual Studio Marketplace.
- Cursor, Windsurf, VSCodium, Kiro, Antigravity: install from Open VSX.
Privacy
This extension collects no telemetry and needs no account.
- Nifty C# Templates: New Class, Record & Namespace: New C# class, interface, record, enum, test and controller files with the right namespace, plus namespace syncing. (Open VSX)
- Nifty Paste JSON as Code: JSON to Types: Turn JSON on your clipboard into types for TypeScript, C#, Go, Rust, Python, Java, Kotlin, Swift, Dart and more. (Open VSX)
- Nifty Data Viewer: CSV & Parquet Viewer with SQL: Open CSV, Parquet and JSON files as a fast table and query them with SQL, powered by DuckDB. Sort, page through millions of rows, and export to CSV, Parquet or JSON. (Open VSX)
- Nifty Git Graph: Git History & Branch Graph: See your git history as a graph: branches, merges and tags, commit details and diffs, and checkout, merge, rebase, cherry-pick and more from a right-click. No sign-in. (Open VSX)
- Nifty JSON: Formatter, Validator & JSONPath: Format, minify, sort keys, query with JSONPath, copy paths, generate TypeScript types, and browse huge JSON files in a fast tree view. (Open VSX)
- Nifty Monitor: CPU & Memory in the Status Bar: CPU, memory and disk usage in the status bar, including on remote SSH machines and dev containers. (Open VSX)
See all 21 Nifty tools at https://getnifty.dev
| |
