https://github.com/killerapp/mermaid-render
A simple viewer for Mermaid diagrams.
https://github.com/killerapp/mermaid-render
mermaid mermaid-diagrams mermaidjs nextjs react tailwindcss
Last synced: 6 months ago
JSON representation
A simple viewer for Mermaid diagrams.
- Host: GitHub
- URL: https://github.com/killerapp/mermaid-render
- Owner: killerapp
- Created: 2024-08-07T18:51:53.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-04T06:47:51.000Z (8 months ago)
- Last Synced: 2025-02-09T09:19:37.997Z (8 months ago)
- Topics: mermaid, mermaid-diagrams, mermaidjs, nextjs, react, tailwindcss
- Language: JavaScript
- Homepage: https://killerapp.github.io/mermaid-render/
- Size: 253 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📊 Mermaid Diagram Viewer
This project showcases the integration of modern web technologies to create an interactive diagram maker application.
🌐 **Demo:** [https://killerapp.github.io/mermaid-render/](https://killerapp.github.io/mermaid-render/)
## 📸 Screenshot
## 🚀 Technologies and Concepts Demonstrated
1. **Next.js** 🔄: React framework for server-side rendering and static site generation
2. **React** ⚛️: JavaScript library for building user interfaces
3. **Mermaid** 🧜♀️: JavaScript-based diagramming and charting tool
4. **Tailwind CSS** 🎨: Utility-first CSS framework for rapid UI development
5. **Cloudflare Workers** ☁️: Serverless execution environment for application augmentation
## 🧩 Components
- `DiagramControls.jsx`: UI controls for manipulating diagrams
- `DiagramRenderer.jsx`: Responsible for rendering the diagrams
- `MermaidRenderer.jsx`: Handles the rendering of Mermaid diagrams
## 🌟 Key Features
- 🖥️ Server-side rendering with Next.js
- 🖱️ Client-side interactivity with React
- 📈 Diagram creation and rendering using Mermaid
- 📱 Responsive design with Tailwind CSS
- 🛣️ API routing (placeholder in `_worker.js`)
- 📦 Static asset serving via Cloudflare Workers
## ⚙️ Configuration
- Custom webpack configuration in `next.config.js`
- PostCSS and Tailwind CSS configuration
This project demonstrates the integration of various modern web technologies to create a functional and interactive diagram maker application.