← Back to Editor

About Mermaid Diagram Editor

A modern, web-based tool for creating beautiful diagrams using Mermaid.js. This editor provides a professional development environment with real-time rendering, cloud storage, intelligent autocomplete, and a seamless user experience across all devices.

✨ Key Features

🎨 Professional Code Editor

Syntax highlighting with YAML support
9 beautiful editor themes
Smart autocomplete for Mermaid syntax
Line numbers & bracket matching
Active line highlighting

⚡ Real-time Preview

Instant diagram rendering
Adjustable split-view layout
Zoom & pan navigation
Keyboard shortcuts for control
Background pattern options (dots, grid, blank)

☁️ Cloud Storage

Sign in with Google account
Save diagrams to cloud
Access from anywhere
Manage & delete saved diagrams
Powered by Firebase

💾 Save & Share

Auto-save to local storage
Shareable diagram URLs
Export as PNG, JPG, SVG, PDF
Copy to clipboard
Save/load code files (.txt, .mmd)

📱 Mobile Optimized

Responsive design for all screens
Code/Preview view toggle
Touch-friendly controls
Optimized mobile interface

🎯 Theme Support

Dark & light modes
Theme-aware exports
Persistent theme selection
Customizable backgrounds

📊 Supported Diagram Types

Create 22+ types of diagrams with sample templates:

Flowchart
Sequence Diagram
Class Diagram
State Diagram
Entity Relationship
User Journey
Gantt Chart
Pie Chart

Quadrant Chart
Requirement Diagram
GitGraph
C4 Diagram
Mindmaps
Timeline
Sankey Diagram
XY Chart

Block Diagram
Packet Diagram
Kanban Board
Architecture Diagram
Radar Chart
Treemap

🎨 Editor Themes

Choose from 9 carefully selected themes to match your preference:

Material Darker - Modern dark theme with excellent contrast
Monokai - Popular theme inspired by Sublime Text
Dracula - Dark theme with vibrant colors
Nord - Cool, arctic-inspired color palette
Solarized Dark - Low-contrast dark theme for reduced eye strain
Solarized Light - Companion light theme to Solarized Dark
Eclipse - Clean light theme inspired by Eclipse IDE
IntelliJ IDEA - Light theme from the popular Java IDE
Ambiance - Subtle dark theme with warm tones

⌨️ Keyboard Shortcuts

Zoom Controls

Ctrl + + - Zoom in
Ctrl + - - Zoom out
Ctrl + 0 - Reset zoom to 100%

Pan Navigation

Ctrl + i - Pan up
Ctrl + k - Pan down
Ctrl + j - Pan left
Ctrl + l - Pan right

📤 Export Options

Export your diagrams in multiple formats with theme-aware rendering:

PNG - High-quality raster image, perfect for documents and presentations
JPG - Compressed image format for smaller file sizes
SVG - Scalable vector graphics, ideal for web and print (auto-used for very large diagrams)
PDF - Professional document format with auto-scaling to A4 size
Clipboard - Copy image directly to paste into other applications (HTTPS/localhost only)

🔧 Technical Stack

Mermaid.js v11 - Powerful diagram generation library
CodeMirror 5 - Professional code editor component
Firebase - Authentication & cloud storage
Split.js - Resizable split-view panels
svg-pan-zoom - Interactive diagram navigation
jsPDF - PDF generation for exports
Vanilla JavaScript - No framework overhead, fast and efficient

🌐 Browser Compatibility

Works on all modern browsers:

Chrome/Edge (recommended)
Firefox
Safari
Mobile browsers (iOS Safari, Chrome Mobile)

🚀 Performance

Zero build process required
Fast rendering engine
Optimized autocomplete (no flickering)
Smart SVG handling for large diagrams

📄 License

This project is licensed under the MIT License.

🔗 Links

Made with ❤️ for the diagram community

← Back to Editor