Mermaid Live Editor

A real-time editor for creating and editing Mermaid diagrams. Built with Next.js and shadcn/ui. view demo

Features

• 🔄 Real-time preview
• 🎨 Syntax highlighting
• ⚙️ Configuration editor
• 📱 Responsive design
• 🌓 Dark/Light mode support
• ↔️ Resizable panels

Getting Started

First, install the dependencies:

npm install
# or
yarn install
# or
pnpm install

Then, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the editor.

Technologies Used

• Next.js
• Mermaid.js
• Monaco Editor
• shadcn/ui
• Tailwind CSS

Supported Diagrams

• Flowcharts
• Sequence Diagrams
• Class Diagrams
• State Diagrams
• Entity Relationship Diagrams
• User Journey Diagrams
• Gantt Charts
• Pie Charts
• And more...

License

MIT License - feel free to use this project for your own purposes.