https://github.com/lyqht/mermaid-school
Collaborate and learn about mermaid in realtime
https://github.com/lyqht/mermaid-school
fakerjs liveblocks mermaidjs nextjs
Last synced: 11 months ago
JSON representation
Collaborate and learn about mermaid in realtime
- Host: GitHub
- URL: https://github.com/lyqht/mermaid-school
- Owner: lyqht
- Created: 2023-12-02T02:25:35.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-07T16:17:19.000Z (about 2 years ago)
- Last Synced: 2025-01-05T13:08:07.362Z (about 1 year ago)
- Topics: fakerjs, liveblocks, mermaidjs, nextjs
- Language: TypeScript
- Homepage: https://mermaid-school.vercel.app
- Size: 300 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Mermaid School
Welcome fishies! With this app, you will learn to dive into the ocean of diagrams with Mermaid. Swim alongside fellow learners and navigate the currents of diagramming together! 🌊
What is Mermaid?
If you don't know already, here's an official definition from [MermaidJS](https://mermaid.js.org/)
> Mermaid is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
## Here's a screenshot of how it will be like
## 🛠️ Tech Stack
- **Fullstack**: NextJS
- **Realtime Collaboration**: Liveblocks
- **Code Editor**: Monaco Editor (Visual Studio Code-based)
- **Diagramming Tool**: MermaidJS
## ✨ Features
### Interactive Learning Environment
Collaborate, share, and learn together in realtime.
### Monaco Editor Integration
Enjoy a familiar coding experience with the Monaco Editor. Key features include:
- **Undo/Redo**: Standard keyboard shortcuts (Cmd+Z for undo, Ctrl+D for duplicate lines)
- **Ease of Use**: An intuitive interface that mirrors Visual Studio Code
### Mermaid Live Preview
As you write your MermaidJS syntax, watch your diagrams come to life:
- **Real-time Visualization**: Immediate preview next to your code
- **Error Handling**: The app continues to show the last valid diagram with an indicator for syntax errors, enhancing the learning experience
## Future Improvements
- Enhanced Responsive Design: Improve the layout for mobile users, ensuring a seamless experience across all devices
- User Authentication: Allow fishie captains to create their own private schools.
- Dynamic work areas: Introduce the ability to add multiple editors and diagram previews concurrently, facilitating complex projects and collaborative learning
## Resources
For more resources, check out [this padlet](https://padlet.com/senchatea/mermaid-3l2jbgazxyifdm57)