🧜‍♀️ Mermaid Live Editor & Viewer

✨ Features

🔥 Core Features

• ⚡ Live Preview: See your diagrams update instantly as you type
• 📱 Responsive Split View: Adjustable panels that work perfectly on all devices
• 🎨 Syntax Highlighting: Monaco Editor with intelligent code completion
• 🚀 Fast Rendering: Debounced updates for smooth performance
• 📤 Quick Sharing: Generate shareable links with URL encoding
• 🌙 Dark/Light Theme: Beautiful themes that adapt to your preference

💎 Advanced Features

• 🔍 Zoom & Pan: Interactive diagram navigation with mouse and touch
• 💾 Auto-Save: Your work is automatically saved in browser storage
• 📋 One-Click Copy: Copy diagrams as SVG or share links instantly
• 🔄 Real-time Validation: Immediate feedback on syntax errors
• 📱 Mobile Optimized: Perfect experience on phones and tablets
• ⌨️ Keyboard Shortcuts: Power user shortcuts for faster workflow

📖 Usage Examples

🎯 Basic Flowchart

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E[End]

🏢 Sequence Diagram

sequenceDiagram
    participant User
    participant Frontend
    participant API
    participant Database

    User->>Frontend: Create diagram
    Frontend->>API: Validate syntax
    API->>Database: Save diagram
    Database-->>API: Success
    API-->>Frontend: Confirmation
    Frontend-->>User: Show result

📊 Class Diagram

classDiagram
    class DiagramEditor {
        +String content
        +Boolean isValid
        +updateContent(content)
        +validateSyntax()
        +exportSVG()
    }

    class DiagramViewer {
        +Element svg
        +render(content)
        +zoom(level)
        +pan(x, y)
    }

    DiagramEditor --> DiagramViewer : renders

🛠️ Available Scripts

⚙️ How It Works

🏗️ Architecture Overview

graph LR
    A[📝 Monaco Editor] --> B[⚡ Debounced Updates]
    B --> C[🧜‍♀️ Mermaid Parser]
    C --> D[📊 SVG Renderer]
    D --> E[🔍 Zoom & Pan Viewer]

    F[💾 Local Storage] --> A
    A --> F

    G[🔗 URL Encoding] --> A
    E --> H[📤 Share Function]
    H --> G

🔧 Key Components

• 📝 Editor Panel: Monaco Editor with TypeScript and Mermaid syntax highlighting
• 📊 Diagram Panel: Real-time SVG rendering with interactive zoom and pan
• 🔄 Debounced Updates: Optimized performance with 300ms debounce
• 📱 Responsive Layout: react-split for adjustable panels on all devices
• 💾 Auto-Save: Browser localStorage for persistent diagram storage
• 🔗 URL Sharing: Compressed diagram data in shareable URLs

🧰 Technology Stack

🔧 Configuration & Customization

🎨 Theming

The application supports both light and dark themes using Material-UI's theming system. Themes automatically adapt to system preferences.

⚙️ Editor Configuration

Monaco Editor is configured with:

• Mermaid syntax highlighting
• Auto-completion
• Error detection
• Bracket matching
• Code folding

📱 Responsive Breakpoints

• Mobile: < 768px (stacked layout)
• Tablet: 768px - 1024px (adjustable split)
• Desktop: > 1024px (side-by-side split)

📊 Performance Features

• ⚡ Turbopack: Lightning-fast development builds
• 🔄 Debounced Rendering: Optimized diagram updates
• 💾 Efficient Storage: Compressed URL encoding with Pako
• 📱 Mobile Optimized: Touch-friendly interface
• 🚀 SSR Ready: Server-side rendering support

🙏 Acknowledgments

• Mermaid.js↗ - For the amazing diagram rendering engine
• Monaco Editor↗ - For the powerful code editor
• Next.js↗ - For the excellent React framework
• Material-UI↗ - For the beautiful component library
• Vercel↗ - For seamless deployment and hosting

📈 Stats