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.