---
title: "Building Super Mermaid with Claude Fable: beautifying and exporting VS Code Mermaid diagrams"
description: "Notes on building Super Mermaid, a VS Code extension I made with Claude. It addresses two gaps in VS Code's built-in Mermaid support—hard-to-read default styles and a broken export workflow—with automatic coloring and one-click high-resolution export."
canonical_url: "https://blog.markkulab.net/en/post/super-mermaid-beautify-export"
author: "Mark Ku"
author_url: "https://blog.markkulab.net/en/author/mark-ku"
site: "Mark Ku's Tech Notes"
date_published: "2026-06-13 11:26:06 +0800"
category: "AI"
language: "en"
license: "CC BY 4.0"
license_url: "https://creativecommons.org/licenses/by/4.0/"
attribution: "when reusing or quoting, credit the author and link back to the original"
---

# Building Super Mermaid with Claude Fable: beautifying and exporting VS Code Mermaid diagrams

## Introduction

Mermaid is a common tool for "Diagram as Code." It has over 85,000 stars on GitHub and a large user base, and it's often used to describe system architecture and flows when developers and AI work together. Research suggests that describing the same architecture in Mermaid syntax takes roughly 400–500 tokens, versus around 2,000 tokens for plain text—about a 3–6x saving, which still matters for LLM conversations.

That said, anyone who has written Mermaid has probably run into two things: the default styles aren't easy to read in dark mode, and to get a usable PNG you often have to copy the code into an external site to convert it, where the resolution tends to come out blurry.

In May 2026, VS Code 1.121 built Mermaid rendering directly into the Markdown preview, so basic rendering is now standard. But theming and exporting were still missing, and that's where I started building [Super Mermaid](https://marketplace.visualstudio.com/items?itemName=mark-ku.super-mermaid).

## What's still missing after VS Code's built-in Mermaid

### 1. Default styles and readability

VS Code's built-in renderer uses the default Mermaid theme, whose low-contrast lines and text aren't easy to make out in dark mode. A developer on the Cursor forums mentioned that presenting a Mermaid diagram in a larger engineering meeting was hard to read because the contrast was low. GitHub Discussions and the Obsidian forums also have a fair number of "hard to read in dark mode" reports.

![VS Code's built-in default Mermaid theme: the whole diagram uses a single color with no visual hierarchy, so a complex diagram is harder to read at a glance](https://blog.markkulab.net/content/markku/posts/super-mermaid-beautify-export/images/theme-default-flowchart.webp)

Mermaid added `look: handDrawn` (based on rough.js) and the Neo style in v11.14.0, but it requires manually adding a `%%{init}%%` block to each diagram. That's not a low bar, and it turns into repetitive work once a document has many diagrams.

### 2. The export workflow

To get a PNG, the usual approach with most tools is: copy the code → open a browser → paste it into mermaid.live → download the image. This breaks your flow inside VS Code, and the default export resolution is only 1x, so it tends to look blurry in presentations or technical documents. For presentations, at least 4x (around 384 DPI) is generally recommended.

### Market landscape

| Extension / Tool | Installs | Limitations |
|---|---|---|
| Mermaid Chart (Official) | 840k | Free plan limited to 5 diagrams, requires a cloud account, rated around 3/5 |
| beautiful-mermaid | 10.4K ⭐ on GitHub | Standalone renderer, not a VS Code extension |
| Markdown Preview Mermaid Support | 4.9M (Deprecated) | Marked as deprecated after VS Code 1.121 added native support |

Existing solutions are mostly either feature-limited or don't integrate directly into the VS Code workflow.

## How Super Mermaid approaches it: automatic coloring and one-click high-resolution export

### Automatically applies a high-contrast theme

Without any manual configuration, Super Mermaid applies a high-contrast Colorful theme that colors each subgraph and node type, so it reads a bit better than the default in both dark and light mode. The same "Order Processing Flow" diagram is clearer once the theme is applied:

![Super Mermaid applying the Colorful theme automatically: subgraphs and node types are color-coded, so the client, backend, and payment sections are easier to tell apart](https://blog.markkulab.net/content/markku/posts/super-mermaid-beautify-export/images/demo-flowchart.webp)

Auto-coloring isn't limited to flowcharts—sequence diagrams, ER diagrams, Gantt charts, mind maps, pie charts, and so on get a palette too:

![Super Mermaid auto-coloring a mind map: each branch gets a gradient that fades outward from the center](https://blog.markkulab.net/content/markku/posts/super-mermaid-beautify-export/images/demo-mindmap.webp)

If you prefer a whiteboard, hand-drawn look, switching the theme in the toolbar applies the Sketch style—handy for teaching or brainstorming:

![Super Mermaid's Sketch hand-drawn theme: keeps the high-contrast palette and adds the texture of hand-drawn strokes](https://blog.markkulab.net/content/markku/posts/super-mermaid-beautify-export/images/theme-sketch-flowchart.webp)

### One-click high-resolution export without leaving VS Code

The preview interface has `Export as PNG` and `Export as SVG` buttons, so you can generate 4x high-resolution (around 384 DPI), transparent-background images in one click—good enough for presentations and technical documents. The process doesn't require switching windows or opening a separate browser.

![Super Mermaid's preview panel: the toolbar has built-in theme switching, export, and shareable-link buttons—all without leaving VS Code](https://blog.markkulab.net/content/markku/posts/super-mermaid-beautify-export/images/preview-panel.webp)

### A few features for regular users

- Export All: when a Markdown file has a dozen or so Mermaid diagrams, you can export them all at once instead of one by one
- Presentation mode: show diagrams full-screen directly inside VS Code, which is convenient in meetings
- Diagram search: when a document is long and full of diagrams, quickly locate the one you want
- Shareable link: generate a link so colleagues without the extension can view the diagram

![The Gallery thumbnail wall: see every diagram in a document at a glance, click a thumbnail to jump to it, and pair it with Export All to export them all at once](https://blog.markkulab.net/content/markku/posts/super-mermaid-beautify-export/images/gallery.webp)

## Development: building this extension with Claude Fable 5

For this project I used [Claude Fable 5](https://www.anthropic.com/claude/fable), Anthropic's fifth-generation model aimed at longer, autonomous coding tasks, which became available in GitHub Copilot in June 2026. Here are a few moments from the process.

### From goal to implementation

I described the core goal to Fable 5: "Build a VS Code extension that intercepts and beautifies Mermaid rendering and provides high-resolution image export." It quickly picked up the direction—inject custom styles through Markdown-It's rendering pipeline and use a Puppeteer headless browser for high-resolution screenshots.

### Boilerplate to the AI

VS Code extensions involve a fair bit of boilerplate: the `contributes` settings in `package.json`, managing the Extension Host lifecycle, and wiring up the Markdown-It rendering engine. Fable 5 could generally produce a workable base structure for these, which let me focus more on the theme engine and export quality.

### Working through the technical details together

For the "4x high-resolution export," the key was Puppeteer's `deviceScaleFactor`. Fable 5 and I went through a few rendering strategies and settled on rendering the SVG at 4x zoom in a headless browser and then capturing the diagram area:

```typescript
const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();

await page.setViewport({
  width: 1280,
  height: 800,
  deviceScaleFactor: 4, // 4x 高解析渲染，約 384 DPI
});

// 注入 Mermaid SVG 並等待渲染完成
await page.setContent(htmlWithMermaidSvg);
const svgElement = await page.$('svg');

// 截取 SVG 元素，自動裁切到圖表邊界
const pngBuffer = await svgElement.screenshot({
  type: 'png',
  omitBackground: true, // 透明背景
});
```

The idea is straightforward: use `deviceScaleFactor: 4` so the browser renders at 4x pixel density, and `omitBackground: true` to get a transparent background. The resulting PNG comes out a bit sharper than 1x when placed in a presentation.

## Conclusion

Super Mermaid mainly fills the gaps in VS Code's native Mermaid support around theming and exporting, automating the more tedious steps. For people who often use Mermaid to communicate architecture with AI, a clear, easy-to-share diagram is usually less effort than a block of text and makes it easier to stay on the same page.

If you're interested, you can [download Super Mermaid from the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=mark-ku.super-mermaid), or head to [GitHub](https://github.com/markku636/vs-code-extension-super-mermaid) to file an issue or contribute code.

## References

- [Mermaid GitHub — 85K+ stars](https://github.com/mermaid-js/mermaid)
- [VS Code 1.121 Natively Renders Mermaid Diagrams](https://medium.com/codex/vs-code-renders-mermaid-diagrams-natively-a5bb3db0e406)
- [Mermaid + Claude Code Context Compression — 3-6x Token Efficiency](https://www.mindstudio.ai/blog/mermaid-diagrams-claude-code-skills-context-compression/)
- [Poor Readability of Mermaid Diagrams — Cursor Forum](https://forum.cursor.com/t/mermaid-diagrams-are-hard-to-read-poor-contrast/153850)
- [Claude Fable 5 (Anthropic Official)](https://www.anthropic.com/claude/fable)
- [Fable 5 Generally Available in GitHub Copilot](https://github.blog/changelog/2026-06-09-claude-fable-5-is-generally-available-for-github-copilot/)

---

## About this article and its author

Originally published on [Mark Ku's Tech Notes](https://blog.markkulab.net/en/post/super-mermaid-beautify-export)

License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — when reusing or quoting, credit the author and link back to the original

### About the author

**[Mark Ku](https://blog.markkulab.net/en/author/mark-ku)** — Software Solution Provider

- 10+ years senior software engineer, now an AI Builder
- Focused on large-platform architecture — North-American e-commerce, AI SaaS subscription billing
- Combining AI Agents and automation to build evolvable product foundations

### Free tools built by the author

All of these are free to use:

- [Free PDF Sign Tool](https://blog.markkulab.net/en/tools/pdf-sign): Online PDF sign tool — draw, type, or upload a signature, then drag, resize, and download. Everything runs in your browser; nothing is uploaded.
- [VS Code Refactory](https://blog.markkulab.net/en/tools/refactory): Refactory is a VS Code refactoring extension: 34 actions plus a 37-rule code-smell inspection layer with a Code Health dashboard, across 18 languages, backed by 534 tests. It learns your repo's conventions: where interfaces live, where DI is registered, whether 'use client' belongs. It ranks files by git churn × complexity so you know what to fix first, and hands any smell to the Claude Code already on your machine. Free to use, and your source never leaves your computer.
- [DB-Kit Database Manager](https://blog.markkulab.net/en/tools/db-kit): DB-Kit is a lightweight, cross-platform database manager built with Tauri + Rust + React. Manage MySQL, MariaDB, PostgreSQL, SQL Server, Oracle, SQLite, MongoDB, Redis, Kafka, Elasticsearch and RabbitMQ from one consistent interface: passwords encrypted in the OS keychain, SSH tunnels, full CRUD, a visual query builder, stacked multi-statement result sets, cross-connection data transfer and compare/sync, Excel / CSV import & export, visualized execution plans, ER diagrams, scheduled backups, SQL stress testing with p50–p99 latency percentiles, a 15-rule SQL review engine, Kafka message browsing with monitoring & alerts, a bilingual UI (Traditional Chinese / English), a built-in AI assistant (natural-language SQL, AI review and tuning advice) and the dbk CLI. Free and open source (MIT), with installers for Windows, macOS and Linux.
- [VS Code Super Mermaid](https://blog.markkulab.net/en/tools/super-mermaid): Super Mermaid is a VS Code extension for beautiful Mermaid diagrams out of the box: auto-colored live preview, mouse pan & zoom, high-res PNG / SVG export, 21 templates and multiple themes. Free and open source (MIT).
- [React Super Mermaid](https://blog.markkulab.net/en/tools/react-super-mermaid): react-super-mermaid is an open-source React component library: render beautiful Mermaid diagrams with a single <MermaidViewer>, with built-in colorful / sketch themes, pan & zoom, in-diagram search, and high-res SVG / PNG export. Lightweight, SSR-safe, fully typed. Free and open source (MIT).
- [Jira / Confluence Super Mermaid](https://blog.markkulab.net/en/tools/jira-super-mermaid): An Atlassian Forge app: write Mermaid syntax directly inside a Jira issue or a Confluence page and get flowcharts, sequence diagrams, state machines and Gantt charts. 11 diagram types, SVG / PNG export, light and dark themes, full CJK support. Runs on Atlassian: your diagrams live in your own site and the app calls no third-party service. Free, coming soon to the Atlassian Marketplace.
- [Mermaid Live Preview](https://blog.markkulab.net/en/tools/mermaid-preview): Write Mermaid in your browser, see it render instantly, and share the whole diagram as a single link. No sign-up, nothing uploaded to a server, and mermaid.live share links work as-is.
- [React Intl Phone Number](https://blog.markkulab.net/en/tools/react-intl-phone-number): react-intl-phone-number is an open-source React component: framework-agnostic and antd-free, with E.164 in/out, a searchable flag / country-code dropdown, configurable validation levels (strict / mobile-strict / loose), themeable CSS, and i18n — phone logic powered by google-libphonenumber. Lightweight and fully typed. Free and open source (MIT).
- [Uptime Kuma Cluster](https://blog.markkulab.net/en/tools/uptime-kuma-cluster): Turn single-node Uptime Kuma into a highly available cluster: OpenResty + Lua smart load balancing, shared MariaDB state, health checks and automatic failover, plus cluster-management REST APIs. One Docker Compose command to start. Free and open source (MIT).
- [Special Education](https://blog.markkulab.net/en/education): Learning materials crafted for special education students

### Daily podcasts

- [Tech News](https://blog.markkulab.net/en/category/tech-news): Daily curated AI and tech trends. Catch the latest developments via audio summaries — covering AI applications, software architecture, DevOps, and engineering practice. — RSS: https://blog.markkulab.net/feed.xml
- [AI Stock Chat](https://blog.markkulab.net/en/category/ai-stock-chat): Every trading day, an AI-analyzed take on the Taiwan stock market, delivered as a two-host conversation covering the session and the next-day outlook. — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml

### Newsletter

[Subscribe to the newsletter](https://blog.markkulab.net/en/subscribe) — Be the first to know about new posts. No spam, unsubscribe anytime.