GitDiagram

Turn any GitHub repository into an interactive diagram for visualization in seconds.

You can also replace hub with diagram in any Github URL to access its diagram.

🚀 Features

• 👀 Instant Visualization: Convert any GitHub repository structure into a system design / architecture diagram
• 🎨 Interactivity: Click on components to navigate directly to source files and relevant directories
• ⚡ Fast Generation: Powered by Claude 3.5 Sonnet for quick and accurate diagrams
• 🔄 Customization: Modify and regenerate diagrams with custom instructions
• 🌐 API Access: Public API available for integration (WIP)

⚙️ Tech Stack

• Frontend: Next.js, TypeScript, Tailwind CSS, ShadCN
• Backend: FastAPI, Python, Server Actions
• Database: PostgreSQL (with Drizzle ORM)
• AI: Claude 3.5 Sonnet
• Deployment: Vercel (Frontend), EC2 (Backend)
• CI/CD: GitHub Actions
• Analytics: PostHog, Api-Analytics

🛠️ Self-hosting / Local Development

1. Clone the repository

git clone https://github.com/ahmedkhaleel2004/gitdiagram.git
cd gitdiagram

2. Install dependencies

pnpm i

3. Set up environment variables (create .env)

cp .env.example .env

Then edit the .env file with your Anthropic API key and optional GitHub personal access token.

4. Run backend

docker-compose up --build -d

Logs available at docker-compose logs -f The FastAPI server will be available at localhost:8000

5. Start local database

chmod +x start-database.sh
./start-database.sh

When prompted to generate a random password, input yes. The Postgres database will start in a container at localhost:5432

6. Initialize the database schema

pnpm db:push

You can view and interact with the database using pnpm db:studio

7. Run Frontend

pnpm dev

You can now access the website at localhost:3000 and edit the rate limits defined in backend/app/routers/generate.py in the generate function decorator.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Acknowledgements

Shoutout to Romain Courtois's Gitingest for inspiration and styling

📈 Rate Limits

I am currently hosting it for free with the following rate limits. If you would like to bypass these, self-hosting instructions are provided. I also plan on adding an input for your own Anthropic API key.

Diagram generation:

• 1 request per minute
• 5 requests per day

🤔 Future Steps

• Can use cheaper, larger context models like Gemini 1206
• Allow user to enter Anthropic API Key for use at own cost
• Implement RAG with Mermaid.js docs
• Implement font-awesome icons in diagram