Mermaid Live Editor & Viewer

Features

AI Integration

• 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.

Powerful Editor

• 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.

Data & Sync

• 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.

User Experience

• 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.

Sharing & Embedding

• 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.