https://github.com/abakermi/mermaid-live-web
A real-time editor for creating and editing Mermaid diagrams
https://github.com/abakermi/mermaid-live-web
diagram mermaid nextjs shadecn-ui
Last synced: about 1 year ago
JSON representation
A real-time editor for creating and editing Mermaid diagrams
- Host: GitHub
- URL: https://github.com/abakermi/mermaid-live-web
- Owner: abakermi
- Created: 2024-11-19T06:58:31.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-03-26T09:47:38.000Z (over 1 year ago)
- Last Synced: 2025-03-26T10:33:13.079Z (over 1 year ago)
- Topics: diagram, mermaid, nextjs, shadecn-ui
- Language: TypeScript
- Homepage: https://mermaidlive.site
- Size: 4.52 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mermaid Live Editor
A real-time editor for creating and editing Mermaid diagrams. Built with Next.js and shadcn/ui. [view demo](https://mermaidlive.site)
## Features
- 🔄 Real-time preview
- 🎨 Syntax highlighting
- ⚙️ Configuration editor
- 📱 Responsive design
- 🌓 Dark/Light mode support
- ↔️ Resizable panels
## Getting Started
First, install the dependencies:
```bash
npm install
# or
yarn install
# or
pnpm install
```
Then, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the editor.
## Technologies Used
- [Next.js](https://nextjs.org)
- [Mermaid.js](https://mermaid.js.org)
- [Monaco Editor](https://microsoft.github.io/monaco-editor/)
- [shadcn/ui](https://ui.shadcn.com)
- [Tailwind CSS](https://tailwindcss.com)
## 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.