Super Mermaid

Mermaid diagrams that look good the moment you open them. No theming, no config — every diagram comes out colored, rounded, and softly shadowed, ready to drop straight into slides, docs, or a PR. It updates live as you type, exports razor-sharp PNG/SVG, and runs 100% offline.

Same source, zero config — see the difference

The exact same mermaid code. On the left, the stock theme. On the right, what Super Mermaid shows you by default:

mermaid default theme	Super Mermaid Colorful (default)	Sketch (hand-drawn)

Every image in this README and in docs/DEMO.md was exported by the extension itself — not retouched. Browse the gallery to see flowcharts, sequence, ER, class, state, Gantt, pie, mindmap, timeline, and architecture diagrams all get the same treatment.

✏️ New: draw diagrams visually → get Mermaid

Don't want to hand-write Mermaid? Click the ✏ Draw CodeLens above a ```mermaid block (or run Super Mermaid: Draw Diagram) to open an Excalidraw-style visual editor — now covering six diagram types: flowchart, state, ER, class, mindmap, and sequence. Drag to place shapes, drag from a node edge to connect (or to empty space to spawn a connected node), double-click to rename or edit cell content (ER attributes, class members, sequence messages), right-click for shape / colour / align / group / type-specific actions, build sequences from scratch, reconnect edges, toggle direction, auto-tidy, edit the Mermaid source two-way (套用 / Ctrl+Enter re-renders), copy the diagram to the clipboard as an image, and export SVG/PNG. Start from a template on the empty canvas and press ? for the keyboard-shortcut overlay. The editor's colours match the live preview exactly — including classDef/style/linkStyle colours, generics, abstract/static members, ER crow's-foot and markdown labels — and everything writes straight back to your file as clean Mermaid (round-trip stable). Data charts (pie / gantt / journey / timeline / etc.) aren't drawn by dragging — use the live preview for those.

Install

1. Open the Extensions view (Ctrl+Shift+X), search "Super Mermaid", click Install — or grab it from the Marketplace.
2. Open any .md file with a ```mermaid block, or a .mmd / .mermaid file.
3. Hit the preview icon at the top-right of the editor. That's it — nothing to configure.

Why you'll like it

• 🎨 Looks great out of the box — Colorful is the default. Flowcharts, sequence, ER, class, state, Gantt, pie, mindmaps, and timelines all get a modern palette with rounded corners and soft shadows — and every subgraph / swimlane gets its own distinct tint and a colored title, so adjacent lanes are easy to tell apart — without changing a single line of mermaid code. Pie / Gantt / mindmap / timeline charts are repainted with a vibrant, high-contrast palette (white slice separators, contrast-aware labels) instead of mermaid's dim defaults, and labels are weight-boosted in every theme so text stays crisp even in thumbnails. Prefer another look? Switch to Sketch / Auto / Light / Dark / Neutral / Forest from the toolbar.
• ✏️ Sketch style — a hand-drawn, Excalidraw-like whiteboard look in one click: mermaid's built-in handDrawn shapes paired with the bundled Excalifont handwriting font (SIL Open Font License 1.1). The font is embedded into PNG / SVG exports too, so the handwriting survives wherever the image goes.
• 🖱️ Draw it, don't type it — the ✏ Draw CodeLens opens an Excalidraw-style visual editor: drag nodes, hover-to-connect (or drag to empty space to spawn a connected node), double-click to rename, right-click to recolor / change shape / align / group into subgraphs. It writes clean Mermaid back to your file, and existing flowcharts open as draggable diagrams.
• ⚡ Live preview — refreshes ~0.3s after you type. Mouse-wheel zoom, drag to pan, a Fit button, and a floating − / % / + zoom pill in the corner. On a syntax error the diagram stays at the last good render instead of going blank.
• 🖼️ Hi-res export & copy — PNG / JPG / WebP / SVG at 1x / 2x / 4x (pick 4x for slides — stays crisp when projected), with an optional transparent background or a solid canvas-background color. Export All saves every diagram in the document at once. Press c to copy the current diagram to the clipboard and paste straight into Slack, Teams, or PowerPoint.
• 🎯 Click a node, jump to its code — clicking any node, subgraph, or actor moves the editor cursor to the line that defines it.
• 🔍 Find in diagram — press / (or Ctrl+F): everything else dims, matches stay lit, Enter cycles through them and the view centers on each.
• 📽️ Presentation mode — press p for a full-screen slideshow of every diagram in the document. Arrow keys to switch, Esc to leave. Perfect for walking through architecture in a meeting.
• 🗂️ Gallery view — see every diagram in the document on one page; click a thumbnail to open it.
• 🔗 Share to mermaid.live — one click builds a link that opens the diagram in the mermaid.live editor. The code lives only in the URL fragment — nothing is uploaded until someone opens the link.
• 🪟 Pop out — open the preview in its own floating window via the Open in New Window CodeLens above each diagram (or set superMermaid.previewLocation to newWindow), so you can park it on a second monitor while you keep editing.
• 📝 Both sources, plus the built-in preview — works with ```mermaid blocks in Markdown, standalone .mmd / .mermaid files, and the built-in Markdown preview (Ctrl+Shift+V) renders mermaid blocks with the same auto coloring.
• 📄 Full Markdown document preview — beyond just the diagrams, render the whole .md file (headings, text, tables and auto-colored Mermaid) in a dedicated Super Mermaid preview. Right-click → Open Markdown Preview to the Side to split it beside the editor, or Open Markdown Preview in New Window to pop it onto a second monitor. It updates live as you type and follows your editor theme. Use the toolbar Export button to save the rendered document — exactly as you see it, including the chosen theme and diagrams — as a PNG image or a multi-page PDF.
• 🧠 Editor smarts — mermaid syntax highlighting, %% comment toggle with Ctrl+/, keyword completion, and red squiggles on syntax errors while the preview is open.
• 📚 Template library — the Super Mermaid: Insert Diagram Template command offers 21 ready-made templates, plus mmd-* snippets.
• 🌐 Every diagram type, fully offline — flowchart, sequenceDiagram, erDiagram, classDiagram, gantt, pie, mindmap, timeline, journey, C4, architecture… The mermaid engine is bundled inside the extension, so there's no network call and your code never leaves your machine.

How to use

Open the preview

1. Open any .md file with a ```mermaid block, or a .mmd / .mermaid file.
2. Any of these works:
   • Click the preview icon at the top right of the editor
   • Right-click in the editor → Super Mermaid: Open Preview to the Side
   • Right-click a .md / .mmd file in the Explorer → same command
   • Command Palette (Ctrl+Shift+P) → Super Mermaid: Open Preview to the Side
3. Then just edit and watch — it refreshes about every 0.3s. On a syntax error a red message pops up and the diagram stays at the last successful render instead of going blank.

Preview the whole Markdown document

The preview above shows just the diagrams. To render the entire Markdown file — headings, text, tables and auto-colored Mermaid — use either:

• Right-click in the editor (or on a .md file in the Explorer) → Open Markdown Preview to the Side / Open Markdown Preview in New Window
• Command Palette (Ctrl+Shift+P) → Super Mermaid: Open Markdown Preview to the Side / … in New Window

to the Side splits it beside the editor (like the built-in Markdown preview); in New Window pops it into its own floating window so you can park it on a second monitor. Both update live as you type and follow the editor theme. In the floating window, a ✕ in the top-right corner (or Esc) brings it back and hands focus to the editor. Use the Lock button in the preview's toolbar to pin it to the current file instead of following the active editor.

The full-document preview is built for reading long docs:

• Scroll sync — scroll the editor and the preview follows to the same place, and vice-versa. Right-click anything in the preview → Go to source line to jump the editor to the line that produced it.
• Flicker-free live edits — as you type, unchanged diagrams are reused from cache and the new content is swapped in atomically, so diagrams don't blink on every keystroke.
• Outline — click Outline in the toolbar (or press o) for a clickable table of contents down the side that tracks your position as you scroll.
• Syntax highlighting — non-Mermaid code blocks (C#, SQL, JSON, TypeScript…) are highlighted with colors that match your light/dark theme.
• Zoom — Ctrl + mouse wheel zooms the whole document (text and diagrams together); a floating − / % / + pill in the bottom-right shows the level. Ctrl + / - / 0 work too, and clicking the % resets to 100%.
• Reading themes — a Theme dropdown in the toolbar restyles the whole preview (background, text, code highlighting, and diagram colors) independently of your VS Code theme: Follow VS Code, Light (default), and dark presets Dark Purple · Dark Green · Dark Pink · Dark Yellow · Dark Red · Dark Black. Your choice (and zoom level) is remembered across reopen and restart. Chinese/CJK text uses a dedicated reading font so it stays crisp.

Toolbar (left to right)

Zoom sits in a floating − / % / + pill in the bottom-right corner of the canvas — click the % to jump back to 100%. When the preview is popped out to its own window, a ✕ in the top-right corner (or Esc) brings it back and hands focus back to the editor.

Keyboard shortcuts (when the preview panel has focus)

Export tips

• Export and copy resolution is controlled by the 1x / 2x / 4x setting in the Export menu; the default is 2x — use 4x for slides.
• By default the exported background follows the editor theme. Click the Background swatch next to the theme dropdown to pick a surface color and a dot/grid pattern (both apply to the preview and to exports), or tick Transparent background in the Export menu for a see-through PNG / WebP.
• Diagrams containing HTML tags (like journey) can't be rasterized, so they're automatically saved as SVG instead.

Enjoying it? A ⭐ on GitHub and a rating on the Marketplace genuinely help others find it.

Source code, issue tracker, and development docs: GitHub Repository

Author's blog: Mark Ku's Blog