Mermaid Live Editor

A modern, client-side editor for creating Mermaid diagrams with real-time preview. No account required, no server-side processing—everything runs in your browser.

Live demo: animeshkundu.github.io/mermaid-editor

Features

• 🎨 Live Preview - See diagrams render in real-time as you type
• 📝 Monaco Editor - Full-featured code editor with syntax highlighting
• 🔍 Pan & Zoom - Navigate large diagrams with smooth pan and zoom controls
• 🎭 Multiple Themes - Default, Forest, Dark, Neutral, and Base mermaid themes
• 🎨 Elegant Color Palette - Carefully designed beige/neutral color scheme with auto-colored sequence diagram actors
• 📤 Export Options - Export as SVG, PNG (1x–4x scale), or Markdown
• 📋 Copy to Clipboard - Copy diagram as PNG image directly to clipboard
• 🔗 Share URLs - Share diagrams via encoded URLs (no server required)
• ⌨️ Keyboard Shortcuts - Efficient workflow with common shortcuts
• ↩️ Undo/Redo - Full history support with Ctrl+Z / Ctrl+Y
• 📱 Responsive - Tabbed interface on mobile, resizable panels on desktop
• 🌙 Dark Mode - Light and dark application themes

Getting Started

Prerequisites

• Node.js 18+
• npm 9+

Installation

# Clone the repository
git clone https://github.com/animeshkundu/mermaid-editor.git
cd mermaid-editor

# Install dependencies
npm install

# Start development server
npm run dev

The app will be available at http://localhost:5000.

Commands

npm run dev          # Start Vite dev server (port 5000)
npm run build        # Build for production (tsc + vite build)
npm run preview      # Preview production build
npm run test         # Run tests (vitest, single run)
npm run test:watch   # Run tests in watch mode
npm run test:coverage # Run tests with coverage
npm run test:e2e     # Run Playwright integration tests against the dev server
npm run lint         # Run ESLint
npm run clean        # Clear build cache

See docs/integration-testing.md for details on the Playwright setup and recommended coverage.

Supported Diagram Types

• Flowchart
• Sequence Diagram
• Class Diagram
• State Diagram
• Entity Relationship Diagram
• Gantt Chart
• Pie Chart
• User Journey
• Git Graph
• Mindmap
• Timeline
• Quadrant Chart
• Requirement Diagram
• C4 Context Diagram
• Sankey Diagram
• XY Chart
• Block Diagram
• Packet Diagram
• Kanban Board
• Architecture Diagram

Keyboard Shortcuts

Shortcut	Action
Ctrl+Z	Undo
Ctrl+Shift+Z / Ctrl+Y	Redo
Ctrl+S	Export as PNG
Ctrl+Shift+C	Copy code
Ctrl+,	Open configuration
?	Show keyboard shortcuts
F11	Toggle fullscreen preview
Escape	Exit fullscreen
Ctrl+\	Toggle layout direction

Tech Stack

• React 19 - UI framework
• Vite - Build tool
• TypeScript - Type safety
• Tailwind CSS 4 - Styling
• Monaco Editor - Code editor
• Mermaid - Diagram rendering
• shadcn/ui - UI components
• Radix UI - Accessible primitives
• Vitest - Testing

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see LICENSE for details.