A visual editor for Mermaid diagrams. Write Mermaid code on the left, see the diagram render live on the right, and drag pre-built nodes from a palette to build flows without memorizing the syntax.
Status: Active development. The current
mainbranch is a TypeScript + Vite rebuild of an earlier single-file prototype. The interactive-canvas authoring experience described in ROADMAP.md is the next major milestone.
npm install
npm run dev # dev server with HMR
npm run build # production build → dist/
npm run preview # serve the production build
npm run typecheckRequires Node 20+ (developed on Node 25). No backend; the whole thing is a static site and can be hosted on GitHub Pages, Netlify, Cloudflare Pages, or anywhere else that serves files.
- Live Mermaid rendering with debounced re-render and a non-blocking error overlay.
- Monaco editor with a custom Mermaid Monarch tokenizer and FlowState-themed colors.
- Drag-and-drop palette that appends Mermaid syntax to the editor (the next milestone replaces this with true canvas-based authoring — see roadmap).
- Pan + zoom canvas with fit-to-view.
- Diagram templates (flowchart, sequence, ER, gantt, pie, state).
- Import a
.mmdpaste, export.mmdor.png. - Keyboard:
⌘/Ctrl+Sto export MMD,Escto close modals.
index.html ← shell: DOM skeleton, mounts /src/main.ts
src/
main.ts ← entrypoint, wires everything together
tokens.ts ← design tokens (single source for colors)
styles.css ← reads CSS custom properties set by tokens.ts
state.ts ← shared mutable app state (intentionally tiny)
editor.ts ← Monaco init + custom Mermaid language/theme
mermaid.ts ← Mermaid init + debounced render loop
templates.ts ← starter snippets + per-node-kind code generators
dnd.ts ← palette drag-and-drop
panzoom.ts ← canvas pan/zoom
export.ts ← MMD + PNG export
ui.ts ← tabs, modal, status, keyboard shortcuts, action dispatch
legacy/ ← original single-file prototype, kept for reference
See ROADMAP.md. The roadmap is the source of truth for what we're working on; Claude Code sessions should reference it.