Mimaid is a clean, lightweight Mermaid diagram editor designed to eliminate the complexity of traditional diagramming tools. Created out of frustration with cluttered interfaces, Mimaid offers a streamlined experience for creating flowcharts, sequence diagrams, and other visualizations using Mermaid.js syntax.

Key Features

Real-Time Live Preview

• Instant visualization of your diagrams as you type
• Split-screen interface with resizable panes
• Automatic diagram rendering without manual refresh
• Pan and zoom capabilities for detailed viewing

Collaborative Editing

• Work together in real-time with team members
• Create shared rooms for collaborative sessions
• See live cursor positions and edits from collaborators
• Perfect for remote team brainstorming and documentation

Smart Code Editing

• Monaco Editor with intelligent syntax highlighting
• Auto-completion for Mermaid syntax
• Auto-closing brackets and parentheses
• Comment support for better documentation
• Error highlighting for syntax validation

Export & Sharing

• Export diagrams as SVG for scalable graphics
• Export as PNG for easy embedding
• Shareable URLs with compressed diagram code
• View-only mode for presentations
• Direct embedding in documentation

Benefits

• Simplicity First: Clean interface focuses on what matters - your diagrams
• No Installation Required: Works entirely in your browser
• Instant Collaboration: Share a link and start working together immediately
• Professional Output: Export production-ready diagrams in multiple formats
• Zero Learning Curve: If you know Mermaid syntax, you’re ready to go

How It Works

Basic Usage

1. Write Mermaid syntax in the left editor pane
2. See your diagram instantly rendered on the right
3. Use pan and zoom to navigate complex diagrams
4. Export or share when complete

Collaborative Mode

Add room and name parameters to the URL:

https://mimaid.aiocean.dev/?room=team-meeting&name=YourName

View-Only Mode

Perfect for presentations or documentation:

https://mimaid.aiocean.dev/?hideEditor

Supported Diagram Types

• Flowcharts: Process flows and decision trees
• Sequence Diagrams: System interactions and workflows
• Gantt Charts: Project timelines and schedules
• Class Diagrams: Object-oriented design visualization
• State Diagrams: System state transitions
• Entity Relationship Diagrams: Database schemas
• User Journey Maps: Customer experience flows
• Git Graphs: Version control visualization

Technology Stack

Built with modern web technologies for optimal performance:

• Vite + TypeScript: Fast development and type safety
• Monaco Editor: VS Code’s powerful editor in your browser
• Mermaid.js: Industry-standard diagramming library
• Liveblocks + Yjs: Real-time collaboration infrastructure
• LZ-String: Efficient URL compression for sharing

Getting Started

No setup required - just visit mimaid.aiocean.dev and start creating. For collaborative sessions, simply share your room URL with teammates.

Transform your diagramming workflow with Mimaid’s focused, collaborative approach to creating professional Mermaid diagrams.