Mermaid Live Editor & Viewer

Create, edit, and share beautiful Mermaid diagrams in real-time!

A powerful, modern web application that transforms your ideas into stunning diagrams with live preview and instant sharing capabilities.

Features

Smart Assistant: Chat with Google Gemini to create, modify, and fix diagrams using natural language.
Privacy-First: Your Gemini API key is stored locally in your browser and never sent to our servers.

Live Preview: Real-time rendering with debounced updates for smooth performance.
Advanced Code Editor: Monaco Editor providing syntax highlighting, intelligent code completion, and real-time error validation.
Template Library: Access 70+ ready-made templates across 18 categories, with smart search by name or tags.
Responsive Split View: Adjustable panels for code and preview that adapt to any screen size.
Keyboard Shortcuts: comprehensive shortcuts for power users.

Cloud Sync: Sign in with GitHub or Google to sync your diagrams and settings across all your devices.
Auto-Save: Never lose work; changes are automatically saved to browser storage.
Import/Export:
- Import: Load single .mmd files or project .zip archives (supporting optional metadata).
- Export: Download current diagram as .mmd or bulk export your entire collection as a backup .zip.
Personal Collections: Save your favorite snippets and templates locally for quick reuse.
Persistent Settings: Your preferences (theme, colors, fonts) stay with you.

Mobile First: Optimized experience with touch-friendly 44px+ targets, speed dial menus, and bottom sheets.
Interactive Navigation:
- Desktop: Precise mouse wheel zoom.
- Mobile: Native pinch-to-zoom, double-tap to reset, and momentum panning.
Presentation Mode: A distraction-free, full-viewport viewer accessible via the app bar. It preserves state in the URL for safe sharing and hides the toolbar for focus.

Instant Links: Generate shareable URLs containing the full diagram state.
SVG Export: Copy diagrams as high-quality SVGs with one click.
Iframe Embeds: Get ready-to-use HTML code to embed your live diagrams into blogs or documentation.