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 Diagrams: PlantUML, Graphviz & D2 Preview: PlantUML, Graphviz (DOT) and D2 diagrams rendered on your machine: live preview beside the editor, SVG and PNG export, diagrams in the Markdown preview, errors in Problems. No server needed. (Open VSX)
- 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 Colors: Swatches & Picker in Every Language: Colour swatches and VS Code's picker in any file: CSS, Tailwind, Flutter, Swift, Android, C# and Unity colours. Convert formats and check WCAG contrast on hover. (Open VSX)
- Nifty CSS Variables: Custom Property IntelliSense: IntelliSense for CSS custom properties across your project: complete var(--…), see resolved values and colour swatches, go to definitions, catch undefined variables, and browse a colour palette. (Open VSX)
- Nifty Docstrings: Doc Comments for Python, PHP, Rust and Go: Type three quotes under a Python function and get a Google, NumPy or Sphinx docstring with its arguments, types, returns and raises. PHPDoc, Rust and Go doc comments too. (Open VSX)
- Nifty Markdown: TOC, Lists, Shortcuts & Paste: Markdown editing that keeps up: table of contents, section numbers, smart lists and task toggles, formatting keys, image paste, link checks and completions, and math in the preview. (Open VSX)
See all 100+ Nifty extensions and web tools at https://getnifty.dev
| |
