Transform your ideas into stunning diagrams with AI-powered Mermaid diagram generation.
- 🤖 AI-Powered Generation - Create diagrams from natural language descriptions
- 📊 Multiple Diagram Types - Flowcharts, sequence diagrams, class diagrams, and more
- ⚡ Real-time Preview - See your diagrams update as you type
- 🎨 Modern UI - Beautiful, intuitive interface built with shadcn/ui
- 🔒 Authentication - Secure user authentication with Better-Auth
- 💾 Type-Safe APIs - End-to-end type safety with oRPC
- 🚀 SSR Ready - Built on TanStack Start for optimal performance
- Frontend: React, TanStack Start, TailwindCSS, shadcn/ui
- Backend: TanStack Start, oRPC
- Database: SQLite/Turso with Prisma ORM
- Auth: Better-Auth
- Language: TypeScript
- Build: Turborepo, Bun
- Bun (v1.2.21 or later)
- Clone the repository
git clone https://github.com/LeulAria/Mermaid-AI-Playground.git
cd Mermaid-AI-Playground- Install dependencies
bun install- Set up the database
cd apps/web && bun db:local
cd ../..
bun db:push- Configure environment variables
Create a .env file in apps/web with your configuration:
# Add your environment variables here- Start the development server
bun devOpen http://localhost:3001 to view the application.
mermaid/
├── apps/
│ └── web/ # Fullstack application
│ ├── src/ # Application source code
│ ├── public/ # Static assets
│ └── prisma/ # Database schema
├── packages/
│ ├── api/ # API layer and business logic
│ ├── auth/ # Authentication configuration
│ └── db/ # Database schema and queries
| Command | Description |
|---|---|
bun dev |
Start development server |
bun build |
Build for production |
bun check-types |
Type-check all packages |
bun db:push |
Push schema changes to database |
bun db:studio |
Open Prisma Studio |
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.
Built with Better-T-Stack - a modern TypeScript stack.
Made with ❤️ by LeulAria