gitdiagram

gitdiagram

Replace 'hub' with 'diagram' in any GitHub url for an interactive diagram visualization of the code

Stars: 89

Visit
 screenshot

GitDiagram is a tool that turns any GitHub repository into an interactive diagram for visualization in seconds. It offers instant visualization, interactivity, fast generation, customization, and API access. The tool utilizes a tech stack including Next.js, FastAPI, PostgreSQL, Claude 3.5 Sonnet, Vercel, EC2, GitHub Actions, PostHog, and Api-Analytics. Users can self-host the tool for local development and contribute to its development. GitDiagram is inspired by Gitingest and has future plans to use larger context models, allow user API key input, implement RAG with Mermaid.js docs, and include font-awesome icons in diagrams.

README:

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

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for gitdiagram

Similar Open Source Tools

For similar tasks

For similar jobs