Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 month 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 (about 1 month ago)
- Default Branch: master
- Last Pushed: 2024-11-19T08:49:22.000Z (about 1 month ago)
- Last Synced: 2024-11-19T09:48:11.167Z (about 1 month ago)
- Topics: diagram, mermaid, nextjs, shadecn-ui
- Language: TypeScript
- Homepage: https://vercel.com/abakermis-projects/mermaid-live-web
- Size: 4.35 MB
- Stars: 1
- 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://mermaid-live-web.vercel.app)
## 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.