https://github.com/sametcn99/mermaid-viewer
https://github.com/sametcn99/mermaid-viewer
diagram-editor mermaid mermaid-viewer mermaidjs monaco-editor mui mui-material pako
Last synced: 27 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/sametcn99/mermaid-viewer
- Owner: sametcn99
- Created: 2025-04-23T08:13:25.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2025-07-03T21:27:04.000Z (3 months ago)
- Last Synced: 2025-09-02T05:48:46.941Z (about 1 month ago)
- Topics: diagram-editor, mermaid, mermaid-viewer, mermaidjs, monaco-editor, mui, mui-material, pako
- Language: TypeScript
- Homepage: https://mermaid-viewer-alpha.vercel.app
- Size: 676 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mermaid Live Editor & Viewer
A simple web application built with Next.js that allows you to create, view, and edit [Mermaid](https://mermaid.js.org/) diagrams in real-time.
## Features
- **Live Preview:**
- **Split View:**
- **Syntax Highlighting:**
- **Responsive Design:**
- **Debounced Rendering:**
- **Quickly Share Diagrams**
## Getting Started
### Installation
1. Clone the repository:
```bash
git clone https://github.com/sametcn99/mermaid-viewer.git # Replace with your repo URL
cd mermaid-viewer
```
2. Install dependencies:
```bash
bun install # or npm install / yarn install / pnpm install
```
### Running the Development Server
```bash
bun dev
# or
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the application.
The editor panel is on the left (or top on small screens), and the diagram preview is on the right (or bottom).
## How It Works
- The application uses `react-split` for the adjustable panels.
- The editor uses `@monaco-editor/react` (or your chosen editor component) for code input.
- Mermaid code changes trigger a debounced update to the diagram panel.
- The `DiagramPanel` component renders the Mermaid code using the Mermaid.js library.
## Technology Stack
- [Next.js](https://nextjs.org/)
- [React](https://reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Mermaid.js](https://mermaid.js.org/)
- [Material UI (MUI)](https://mui.com/) (for UI components and styling)
- `react-split`
- `lodash.debounce`
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request