Mermaid Diagram Editor
Completely free pro Mermaid diagram editor with live preview, templates, export options, and hand-drawn style.
Usage Guide
Basic Operations
- •Enter Mermaid code in the left editor
- •Diagrams preview automatically; manual "Preview" also available on desktop
- •Use the "Theme" dropdown to switch diagram color themes
- •Use the "Look" dropdown to switch styles (Hand-drawn look currently only supports some diagrams)
- •Use templates to quickly create common diagram types
- •Click the "Clear" button to clear editor content
- •Support importing and exporting .mmd files
Zoom & Navigation
- •Use the zoom control bar to adjust diagram size
- •Click the 🪟 button to fit the diagram to the window size
- •Click the 🎯 button to reset the view to default state
- •Click the wheel mode toggle to choose between zoom and scroll
- •Drag the diagram to pan
- •Click the ⛶ button in the preview area to enter preview fullscreen mode
- •Click the fullscreen button in the toolbar to make the entire tool area fullscreen
Shortcuts
- •Ctrl/Cmd + Enter: Preview diagram
- •Ctrl/Cmd + S: Save to local storage
- •Ctrl/Cmd + /: Toggle line comments
- •ESC: Exit fullscreen mode
Export Options
- •Export as SVG vector image
- •Export as PNG bitmap image
- •Copy SVG code to clipboard
- •Generate share link
What is Mermaid?
Mermaid is a JavaScript-based diagramming tool that allows you to generate complex diagrams using simple text and code. With Markdown-like syntax, you can quickly create flowcharts, sequence diagrams, class diagrams, state diagrams, entity relationship diagrams (ER), user journey diagrams, Gantt charts, pie charts, quadrant charts, requirement diagrams, mindmaps, sankey diagrams, timeline diagrams, and gitgraphs.
Its core philosophy is "Diagrams as Code", allowing diagrams to be version-controlled just like code, making it perfect for developers and technical writers.
Why Choose This Editor?
- Fully local preview, private & secure
- Hand-drawn style support
- Real-time syntax validation
- One-click SVG/PNG export
- Built-in common templates
- Dark mode & multiple themes
About This Tool
The Mermaid Diagram Editor is a completely free tool designed for users who need to quickly generate professional architectural and flow diagrams. It supports standard Mermaid syntax and offers a unique hand-drawn style to give your diagrams a personal touch. All editing is done locally, and you can share encrypted diagram data via URL, balancing convenience with privacy.
Features
- 📝 Code left + live preview right with errors
- 📤 Export SVG/PNG, copy SVG
- 🔗 Share link (LZ-String compressed in URL hash)
- 📚 Templates: flowchart/sequence/class/state/gantt/ER/pie/mindmap/timeline etc.
- 💾 Autosave LocalStorage + restore from URL
- 🌓 Theme auto (override), supports classic/hand-drawn style toggle
- 🎨 Multiple themes: Light/Dark/Forest/Neutral/Base
- 🖱️ Zoom controls: fit to window/reset view/wheel mode toggle
- ⚡ Debounced render + large-graph protection
- ⌨️ Shortcuts: Ctrl/Cmd+Enter render, Ctrl/Cmd+S save, Ctrl/Cmd+/ comment, ESC exit fullscreen
- 🔄 Clear button to remove editor content
- 🖥️ Dual fullscreen modes: preview fullscreen and tool area fullscreen