Mermaid Diagram Editor

A modern web-based editor for creating and managing Mermaid diagrams with real-time preview.

Features

• 📊 Create and edit Mermaid diagrams with live preview
• 💾 Auto-save functionality
• 📱 Responsive design
• 🔍 Zoom and pan controls for diagram preview
• 📺 Full-screen preview mode
• 📝 Code editor with syntax highlighting
• 📂 Local storage for saving diagrams
• 🎯 Intuitive diagram management (create, rename, delete)

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone [your-repository-url]

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The application will be available at http://localhost:5173

Usage

1. Creating a New Diagram

   • Click the '+' button in the sidebar
   • Enter a name for your diagram
   • Start writing your Mermaid syntax

2. Editing Diagrams

   • Use the sidebar to select existing diagrams
   • Toggle between code and preview modes using the eye/code icons
   • Changes are automatically saved

3. Preview Features

   • Use mouse wheel or buttons to zoom in/out
   • Click and drag to pan around the diagram
   • Enter full-screen mode for better visibility

Built With

• React
• TypeScript
• Vite
• Mermaid.js
• Tailwind CSS
• Lucide Icons

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.