A modern, feature-rich web-based editor for creating and managing Mermaid diagrams with real-time preview, cross-device sync, and advanced export capabilities.
Try it now: mermaid.codefrost.dev
- 📊 Real-time Mermaid diagram rendering with live preview
- 📝 Smart code editor with auto-save functionality
- 🔍 Advanced zoom & pan controls (mouse wheel + drag)
- 📺 Full-screen preview mode for distraction-free viewing
- 🎨 Light/Dark theme support with optimal contrast
- 🖱️ Enhanced panning: Right-click always enabled, left-click toggleable
- 🔗 URL-based sharing - Generate shareable links for any diagram
- 📁 File import/export - Support for .mmd and .json backup files
- 🗂️ Drag & drop import - Simply drop files to import diagrams
- 📋 Smart paste detection - Paste Mermaid code to auto-create diagrams
- 💾 Auto-backup system - Export all diagrams as JSON backup
- 📄 Multi-format export: PDF, PNG, SVG, MMD
- 🖨️ Print optimization - Clean, centered printing via Ctrl+P
- 📱 Enhanced mobile controls - 2-row layout with expandable export options
- ⚡ High-quality exports with proper scaling and backgrounds
- 🎮 Smooth animations - Fluid sidebar transitions and control animations
- ✨ Custom modal system - No ugly browser alerts/confirms
- 🎉 Interactive welcome guide - Comprehensive feature overview
- 📂 Smart diagram management - Create, rename, delete, organize
- 🔄 Persistent state - Remembers your preferences and diagrams
- 🌐 No login required - Works completely offline after first load
- 📁 Collection management - Create, edit, and delete collections
- 🎨 Customizable collections - Choose colors and icons for visual organization
- 🖱️ Drag & drop organization - Simply drag diagrams to collections
- 🔗 Multi-collection support - Diagrams can belong to multiple collections
- 🏷️ Visual collection badges - See which collections a diagram belongs to
- Node.js (v14 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/mamertofabian/mermaid-diagram-editor.git
cd mermaid-diagram-editor- Install dependencies:
npm install- Start the development server:
npm run devThe application will be available at http://localhost:5173
- New Diagram: Click the '+' button in the sidebar
- Smart Paste: Copy Mermaid code and paste anywhere - automatically creates a new diagram
- Import Files: Drag & drop .mmd or .json files, or use the Import button
- Live Editing: Write Mermaid syntax and see real-time preview
- View Modes: Toggle between code and preview modes (eye/code icons)
- Auto-Save: All changes are automatically saved as you type
- Zoom: Mouse wheel or +/- buttons
- Pan: Left-click drag (toggleable) or right-click drag (always enabled)
- Full-screen: Click expand icon for distraction-free viewing
- Themes: Switch between light/dark themes for optimal contrast
- Mobile: 2-row control layout with expandable export buttons and smooth animations
- Share: Click share icon to generate URL and copy to clipboard
- Export Single: Export individual diagrams as .mmd files
- Export All: Backup all diagrams as JSON file
- Print: Use Ctrl+P for clean, diagram-only printing
- Multi-format: Export as PDF, PNG, or SVG
- Create Collections: Click the "Collection" button to create new collections
- Customize: Choose colors and icons for each collection
- Drag & Drop: Simply drag any diagram to a collection header to add it
- Multi-collection: Diagrams can belong to multiple collections
- Visual Feedback: Clear indicators show valid drop zones and prevent duplicate additions
- Manage: Edit or delete collections using the buttons in each collection header
- Frontend: React 18 + TypeScript
- Build Tool: Vite (for fast development and optimized builds)
- Diagram Engine: Mermaid.js (latest version)
- Styling: Tailwind CSS (utility-first CSS framework)
- Icons: Lucide React (beautiful, customizable icons)
- Export: jsPDF + html2canvas (high-quality exports)
- Storage: Browser localStorage (no backend required)
- Component-based: Modular React components with TypeScript
- Service Layer: Separate services for storage, import/export, and utilities
- State Management: React hooks (useState, useEffect) - no external state library needed
- Theme System: CSS-in-JS with Tailwind for consistent theming
- File Handling: Native File API with drag & drop support
- URL Encoding: Base64 encoding with Unicode support for sharing
Mamerto Fabian
Founder & AI Solutions Architect
Codefrost | AI-Driven Coder
Contributions are welcome! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow the existing code style and TypeScript patterns
- Add comments for complex logic
- Test your changes thoroughly
- Update documentation if needed
Found a bug or have a feature idea? Please open an issue with:
- Clear description of the problem/feature
- Steps to reproduce (for bugs)
- Screenshots if applicable
- Your environment details
If this project helped you, please consider:
- ⭐ Starring the repository
- 🐦 Sharing it on social media
- 📝 Writing a blog post about it
- ☕ Supporting the developer
This project is licensed under the MIT License - see the LICENSE file for details.
🚀 Try the Live Demo | 💻 View Source | 📅 Book Consultation
Built with ❤️ by Mamerto Fabian at Codefrost