Archgenix

Archgenix is a web-based tool that allows users to create software architecture diagrams using Mermaid.js. Users can design flowcharts, sequence diagrams, and system architecture diagrams directly in the browser with live preview rendering.

---

live demo

https://archgenix.vercel.app

Features

• Create software architecture diagrams
• Mermaid.js diagram support
• Live preview rendering
• Flowcharts
• Sequence diagrams
• System architecture diagrams
• Export diagrams PNG
• Save and manage diagrams
• Dashboard for projects
• Authentication system
• Responsive UI

---

Tech Stack

Frontend

• Next.js
• React
• Tailwind CSS
• Monaco Editor
• Mermaid.js
• Panzoom
• React Hook Form
• TanStack React Query
• Axios

Backend

• Node.js
• Next.js API Routes
• Prisma ORM
• PostgreSQL
• Zod Validation
• JWT Authentication
• bcrypt Password Hashing

Authentication & Security

• Arctic OAuth
• JWT
• Upstash Redis
• Rate Limiting

API Documentation

• Swagger
• Scalar API Reference
• Zod to OpenAPI

Logging

• Pino Logger

Dev Tools

• TypeScript
• ESLint
• Prisma

Deployment

• Vercel
• database on neondb

Installation

Clone the repository:

git clone https://github.com/yourusername/archgenix.git
cd archgenix

Environment Variables

Create a .env file in the root directory and add the following variables:

DATABASE_URL=

JWT_ACCESS_SECRET=
JWT_REFRESH_SECRET=

JWT_ACCESS_EXPIRES_IN=50m
JWT_REFRESH_EXPIRES_IN=7d

NODE_ENV=development

UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=

Install dependencies

bun install

Run database migrations

bunx prisma generate
bunx prisma migrate dev

Run the development server

bun run dev

Build for production

bun run build
bun run start

Contributing

Pull requests are welcome. For major changes, please open an issue first.

License

This project is licensed under the MIT License.

Author

Archgenix – Software Architecture Diagram Builder