Skip to content

Latest commit

 

History

History
109 lines (71 loc) · 2.89 KB

README.md

File metadata and controls

109 lines (71 loc) · 2.89 KB

Image

License

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
  1. Install dependencies
pnpm i
  1. 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.

  1. Run backend
docker-compose up --build -d

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

  1. 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

  1. Initialize the database schema
pnpm db:push

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

  1. 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