GitDiagram is a tool that converts GitHub repositories into interactive architecture diagrams.
The tool solves the problem of understanding a codebase's structure at a glance by analyzing the repository tree and README to generate a system-level architecture graph rather than simply visualizing folder hierarchies. It uses AI to interpret the repository and create diagrams that show how components relate to each other. Users can click on diagram components to jump directly to the corresponding files or directories on GitHub. The generation streams results in real time, showing the explanation and graph as they are built. The tool supports both public and private repositories, with private access controlled through GitHub tokens stored locally in the browser.
GitDiagram suits developers who need to quickly understand unfamiliar codebases or document system architecture without manual diagramming. It works well for repositories with clear README documentation, since the AI uses that context to infer structure. The tool is free to use and accessible through a simple URL substitution: replacing `hub` with `diagram` in any GitHub URL opens the corresponding diagram. Export options include Mermaid source code or PNG downloads, making diagrams portable for documentation or presentations.
The project uses a modern, focused stack built on Next.js with React and TypeScript, deployed exclusively on Vercel for the live service. Generation runs through same-origin API endpoints with explicit timeout management and distributed cancellation rather than relying on process-local state. Storage uses Cloudflare R2 for artifacts and Upstash Redis for quota tracking and coordination. The tool supports multiple AI providers through configuration, defaulting to OpenAI with OpenRouter available for self-hosted setups. A Docker-based offline recipe is maintained as a cold recovery option, though no separate backend implementation or persistent database layer exists in the primary architecture.
