https://github.com/caoergou/mermzen
A clean, lightweight Mermaid diagram editor — hand-drawn style, live preview, and one-click export.
https://github.com/caoergou/mermzen
codemirror diagram diagram-editor flowchart hand-drawn mermaid online-editor png-export static-site svg zero-dependency
Last synced: 24 days ago
JSON representation
A clean, lightweight Mermaid diagram editor — hand-drawn style, live preview, and one-click export.
- Host: GitHub
- URL: https://github.com/caoergou/mermzen
- Owner: caoergou
- License: mit
- Created: 2026-02-26T01:42:39.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-03-26T02:08:52.000Z (about 1 month ago)
- Last Synced: 2026-03-26T12:53:42.076Z (about 1 month ago)
- Topics: codemirror, diagram, diagram-editor, flowchart, hand-drawn, mermaid, online-editor, png-export, static-site, svg, zero-dependency
- Language: TypeScript
- Homepage: https://eric.run.place/MermZen/
- Size: 16.6 MB
- Stars: 31
- Watchers: 16
- Forks: 3
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# MermZen
[](https://github.com/caoergou/mermzen/actions/workflows/deploy.yml)
[](LICENSE)
[](https://github.com/caoergou/mermzen/stargazers)
**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](https://eric.run.place/MermZen/)**
[中文文档](README.zh.md)
---
## 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` — paste `` into any page for a live, hand-drawn diagram with zero dependencies
**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
---
## 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](https://vitejs.dev/) — build tool, dev server, and module bundler
- [TypeScript](https://www.typescriptlang.org/) — type safety (gradual migration, JS modules coexist)
- [Mermaid 11](https://mermaid.js.org/) — diagram rendering
- [CodeMirror 6](https://codemirror.net/) — code editor
- [SVGO](https://github.com/svg/svgo) — SVG optimization on export
- [pako](https://github.com/nodeca/pako) — deflate compression for shareable URLs
All production dependencies are bundled locally — no CDN required at runtime.