TypeScriptMITCreated Dec 15, 2024Last push 1d ago+698 stars this week+1.4K this month
Quick answers
What is gitdiagram?
A fast, web-based tool that automatically generates interactive architecture diagrams from any GitHub repository.
What does gitdiagram do?
GitDiagram is a free, interactive tool that transforms public and private GitHub repositories into visual system-level architecture diagrams in seconds. Instead of merely mapping out folder structures, it analyzes the repository tree, README files, and bounded source excerpts to construct meaningful architectural graphs. Users can quickly access diagrams by simply replacing `hub` with `diagram` in any GitHub URL. It streams the generation process, allowing users to read explanations as the diagram is actively being built. Built on Next.js and Vercel's Bun runtime, it provides a seamless, modern web experience for code exploration.
Who is gitdiagram for?
GitDiagram is designed for software engineers, technical leads, and open-source contributors who need to quickly understand the structure of complex codebases. It is accessible to anyone comfortable navigating GitHub repositories.
How popular is gitdiagram on GitHub?
ahmedkhaleel2004/gitdiagram has 17,821 stars and 1,363 forks on GitHub, and gained 698 stars in the last 7 days.
What license does gitdiagram use?
ahmedkhaleel2004/gitdiagram is released under the MIT license.
Star history
since Dec 22, 2024
17.8K stars as of Oct 4, 2026. Before Sep 18, 2026, reconstructed from public GitHub event archives (checked against the repository's real star total); since then measured daily.
Contribution activity
commits per day, last 52 weeks
448 commits in the last yearLessMore
Signals and awards
derived from tracked data
Widely adopted
17,821 stars
Actively maintained
Pushed within 48 hours
Permissive license
MIT
Continuous integration
Automated checks passing
What gitdiagram does
GitDiagram is a free, interactive tool that transforms public and private GitHub repositories into visual system-level architecture diagrams in seconds. Instead of merely mapping out folder structures, it analyzes the repository tree, README files, and bounded source excerpts to construct meaningful architectural graphs. Users can quickly access diagrams by simply replacing `hub` with `diagram` in any GitHub URL. It streams the generation process, allowing users to read explanations as the diagram is actively being built. Built on Next.js and Vercel's Bun runtime, it provides a seamless, modern web experience for code exploration.
GitDiagram is designed for software engineers, technical leads, and open-source contributors who need to quickly understand the structure of complex codebases. It is accessible to anyone comfortable navigating GitHub repositories.
Architecture-first generation: Converts source code and documentation into system-level graphs rather than simple folder trees.
Interactive source links: Allows users to click on visual components to jump directly to the real source file on GitHub.
URL shortcut integration: Instantly generates a diagram by replacing 'hub' with 'diagram' in a standard GitHub URL.
Private repository support: Safely processes private codebases by utilizing local browser tokens and protected storage namespaces.
Streaming generation: Displays textual explanations in real-time while the architectural graph is actively being planned and drawn.
Where teams use it
Onboarding new developers
Engineering leads generating visual architecture diagrams to help new hires quickly understand complex codebases.
Exploring open-source projects
Developers using the URL shortcut to instantly visualize and evaluate the structure of an unfamiliar open-source tool.
Documenting system designs
Software architects exporting the generated Mermaid source or PNG images to include in official technical documentation.
Reviewing pull requests
Reviewers visualizing a repository's architecture to understand how proposed changes fit into the broader system.
README
main branch
GitDiagram
Turn any public or private GitHub repository into an interactive architecture diagram, or watch it explained in a one-minute narrated video.
Try GitDiagram → · Or replace hub with diagram in any GitHub repository URL.
Sponsored
SMS, WhatsApp, and RCS through one API. Try Sent →
New: explainer videos
GitDiagram can now turn a repository into a narrated video of about a minute. The video starts with what the project is for and what people do with it, then shows briefly how its main parts fit together and one decision under the hood.
Watch the gallery → or add /video to any diagram URL, such as gitdiagram.com/owner/repo/video.
Download an MP4 in landscape or vertical (9:16), with captions burned in.
Making new videos is in early access. Anyone can watch videos that already exist.
Features
Watch a repository explained in a narrated video, or press Video on any diagram page.
Explore the architecture with an AI-generated diagram and streamed explanation.
Jump to the code by clicking any component's linked file or directory.
Use private repositories with a GitHub token via Private Repos in the header.
Export diagrams as PNG or copy the Mermaid source.
Run locally
Requires Bun, Cloudflare R2, Upstash Redis, and an OpenAI or OpenRouter API key. See the setup guide for prerequisites and configuration.
git clone https://github.com/ahmedkhaleel2004/gitdiagram.git
cd gitdiagram
bun install
cp .env.example .env
Explainer videos are off by default. To turn them on, set VIDEO_EXPLAINER_ENABLED=1, NEXT_PUBLIC_VIDEO_EXPLAINER=1, ANTHROPIC_API_KEY, OPENAI_API_KEY and OPENROUTER_API_KEY (for the voice) in .env. See .env.example for the other video settings.
Development
Built with Next.js, React, TypeScript, Tailwind CSS, and Mermaid. Videos use Claude or GPT for the script and scenes and OpenRouter (Gemini 3.8 Flash TTS) for the voice. Deployed on Vercel.
Architecture — generation pipeline, storage, and API
The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
