MermZen

MermZen is an out-of-the-box Mermaid diagram editor. Open it, write syntax, see your diagram — that's the whole experience. No setup, no friction, just the diagram.

The name blends Mermaid (the diagram syntax) and Zen (simplicity). Design and lightness are the point.

Live demo: MermZen

中文文档

Preview

Editor Interface

Feature Showcase

MermZen supports a rich set of themes and style combinations to easily meet different scenario needs:

🎨 Hand-drawn Style + Default Theme

Smooth hand-drawn lines with built-in design sense
Built-in Chinese and English handwriting font support
Ideal for PPT presentations, blog illustrations, personal notes, etc.
Exported images and SVGs include embedded fonts, display correctly everywhere

🌲 Standard Style + Forest Theme

Professional and clean standard line style
Forest green theme, eye-friendly and beautiful
Suitable for technical documentation, enterprise architecture diagrams, formal reports, etc.
Supports 5 official themes, freely switchable

🧩 Hand-drawn Style + Grid Background

Grid background for easy alignment and proportional reference
Supports four background types: white, black, transparent, grid
Freely choose background type when exporting
Grid background only shows in preview and export, does not affect SVG's transparent background

💡 Click the title to edit the corresponding diagram online, freely switch styles and themes

Why MermZen

Mermaid's official live editor is cluttered and overcomplicated: AI upsells, membership prompts, and redundant panels crowd the screen. The interface keeps growing heavier — you just want to write syntax and see a diagram, but instead you're navigating a product that has lost sight of that.

MermZen fills that gap: a CodeMirror 6 editor with Mermaid-aware syntax highlighting, inline error hints with line numbers, and a full keyboard shortcut system. Diagrams are encoded directly in the URL hash, so sharing requires no backend, no account, and no expiring links — just copy the URL.

Features

Editor

CodeMirror 6 with Mermaid syntax highlighting and autocomplete
Inline error display pinpointed to the exact line
Code formatter and command palette (Ctrl+K)
Full keyboard shortcut system

Preview

Live rendering as you type (300ms debounce)
11 diagram types: flowchart, sequence, class, Gantt, pie, mindmap, ER, state, architecture, gitGraph, block-beta
Pan, zoom, and checkerboard background for transparent diagrams
Right-click context menu for quick export

Output

Export SVG or PNG (PNG rendered at 2× resolution)
Copy PNG directly to clipboard
Shareable URL — diagram state encoded in the URL hash, no server needed
Embeddable iframe via embed.html — just URL-encode the Mermaid text into ?text= and drop it in an <iframe> (see Embedding below)

Appearance

Hand-drawn style mode (with Chinese handwriting font support)
5 Mermaid themes + dark / light UI toggle

Onboarding

Built-in example templates
Interactive tour for first-time users

Embedding

Embed any diagram in a page, blog, or doc with a plain <iframe> pointed at embed.html. The frame is transparent, pannable, zoomable, and ships with no runtime dependencies.

Just drop the text in (simplest, AI-friendly)

URL-encode the Mermaid source and pass it as ?text= — no compression, no build step, nothing to install:

<iframe
  src="https://eric.run.place/MermZen/embed.html?text=graph%20TD%3B%20A--%3EB"
  width="100%" height="400" style="border:none"></iframe>

Aliases ?mermaid= and ?diagram= work too. Optional style params: theme (default/dark/forest/neutral/base), look (handDrawn/classic), bg (transparent/grid/CSS color), font, fontSize.

embed.html?text=<encoded>&theme=dark&look=classic&bg=grid

Building the URL in code:

const url = "https://eric.run.place/MermZen/embed.html?text=" +
  encodeURIComponent("graph TD; A-->B");

import urllib.parse
url = "https://eric.run.place/MermZen/embed.html?text=" + \
    urllib.parse.quote("graph TD; A-->B")

Drive it at runtime with postMessage

Re-render without reloading, and auto-resize the iframe to fit:

const frame = document.querySelector('iframe');
frame.contentWindow.postMessage({
  type: 'mermzen:render',
  code: 'graph TD; A-->B',
  options: { theme: 'dark', look: 'classic' }
}, '*');

window.addEventListener('message', (e) => {
  if (e.data?.type === 'mermzen:rendered') {
    frame.style.height = e.data.height + 'px'; // auto-resize
  }
});

The frame posts back mermzen:ready, mermzen:rendered ({ width, height }) and mermzen:error ({ error }).

Compact share links

For long diagrams or to bundle settings into one short token, the Copy embed code / share actions produce a compressed #hash payload (pako deflate + base64). See public/llms.txt for the full format.

Keyboard Shortcuts

Action	Shortcut
Save (choose format)	`Ctrl+S`
Copy PNG	`Ctrl+Shift+C`
Format code	`Ctrl+Shift+F`
Command palette	`Ctrl+K`
File / Edit / View / Help menu	`Alt+F/E/V/H`
Switch preview background	`Alt+1/2/3/4`

Tech Stack

Vite 7 — build tool, dev server, and module bundler
TypeScript — type safety (gradual migration, JS modules coexist)
Mermaid 11 — diagram rendering
CodeMirror 6 — code editor
SVGO — SVG optimization on export
pako — deflate compression for shareable URLs

All production dependencies are bundled locally — no CDN required at runtime.

Agent Skill (for AI Agents & Automation)

MermZen provides an Agent Skill that any compatible AI agent can use to render Mermaid diagrams — no need to clone this repo.

Install the skill

npx skills add caoergou/MermZen

This works with 30+ agents including Claude Code, Cursor, GitHub Copilot, Gemini CLI, VS Code, OpenCode, and more. See skills.sh for the full list.

Quick start (without installing the skill)

If you just want to render a single diagram, use npx skills use to generate a one-shot prompt — no install needed:

npx skills use caoergou/MermZen@mermzen-render | claude
npx skills use caoergou/MermZen@mermzen-render | cursor

Or clone the repo and run the render script directly (requires Puppeteer):

npm install puppeteer  # one-time setup
node skills/mermzen-render/scripts/render.mjs \
  --code "graph TD; A-->B-->C" \
  --output diagram.svg

Parameters

Parameter	Default	Description
`--code`	—	Inline Mermaid code
`--file`	—	Path to `.mmd` file (alternative to `--code`)
`--output`	`./mermzen-output.<fmt>`	Output file path
`--format`	`svg`	`svg` or `png`
`--theme`	(default)	`default`, `dark`, `forest`, `neutral`, `base`
`--look`	`handDrawn`	`handDrawn` or `classic`
`--font`	`kalam`	`kalam` or `caveat` (CJK auto-uses Xiaolai SC)
`--bg`	`transparent`	CSS color, `transparent`, or `grid`
`--scale`	`2`	Device scale factor for PNG
`--width`	`1400`	Minimum PNG canvas width (px); grows to fit large diagrams
`--height`	`900`	Minimum PNG canvas height (px); grows to fit large diagrams

Diagrams always render at their true 1:1 size (never shrunk to fit), so PNG resolution reflects the diagram's real size regardless of --width/--height. SVG output is always the natural vector size — --width/--height/--scale don't apply to it. Run node skills/mermzen-render/scripts/render.mjs --help for more details. For diagram styling tips and common syntax pitfalls, see skills/mermzen-render/references/INDEX.md — one reference file per diagram type.

FilesExpand file tree

README.md

Latest commit

History