GitDiagram – Quick Overview

What it does – Turn any public or private GitHub repository into an interactive architecture diagram (Mermaid) and a short narrated video that walks through the code‑base.

Why it matters – Understanding a project's structure usually means reading a lot of files. GitDiagram automates that, letting developers and AI agents instantly see how parts connect and jump straight to the source.

---

Core Features (as described in the README)

Feature	What you get	How it works (high‑level)
Interactive diagram	Mermaid‑based visualisation of folders/files, with clickable links that open the corresponding code on GitHub.	The service clones the repo, analyses its directory tree and import statements, then emits Mermaid syntax that is rendered on the site.
One‑minute narrated video	A short video (landscape or vertical) that explains the repo’s purpose, main components and a design decision, with captions baked in.	Uses Claude or GPT to generate a script, Claude/GPT for scene planning, and OpenRouter’s Gemini 3.8 Flash TTS for the voice.
Export options	PNG export of the diagram or copy‑paste of the raw Mermaid source.	Simple UI buttons; the Mermaid source is stored on the server and can be downloaded.
Private repo support	Access to private repos via a GitHub personal‑access token entered in the UI header.	The token is sent to the backend, which clones the repo behind the scenes.
AI‑agent integration (MCP server)	A remote MCP endpoint (https://gitdiagram.com/mcp) that returns architecture data, component list, connections, Mermaid source, and video URLs.	No authentication needed; agents can query the endpoint and receive JSON‑structured explanations.
Local development	Run the whole service yourself (Next.js + Bun) with Cloudflare R2, Upstash Redis, and an OpenAI/OpenRouter key.	bun install → copy .env.example → fill keys → bun run dev.

---

How to Use It

1. Web UI – Visit https://gitdiagram.com/owner/repo (or replace hub with diagram in any GitHub URL). The page shows the interactive diagram and a Video button.
2. AI agents – Add the MCP server URL to Claude, Cursor, VS Code, Gemini CLI, Copilot CLI, etc. Then ask questions like “How is fastapi/fastapi structured?” and the agent will retrieve the diagram and explanation.
3. Self‑host – Clone the repo, install Bun, set up the required cloud services (R2, Redis) and API keys, then run bun run dev. Enable video generation by setting the VIDEO_EXPLAINER_ENABLED and voice‑API keys in .env.

---

Technical Stack (from the README)

• Frontend: Next.js, React, TypeScript, Tailwind CSS, Mermaid for diagram rendering.
• Backend: Runs on Bun (a fast JavaScript runtime), stores generated assets in Cloudflare R2, caches metadata in Upstash Redis.
• AI components: OpenAI/OpenRouter for code‑analysis prompts, Claude/GPT for script creation, Gemini 3.8 Flash for text‑to‑speech.
• Deployment: Hosted on Vercel with a Railway/Docker fallback for fail‑over.

---

Who Might Benefit?

• Developers joining a new codebase – get a quick visual map and a video walkthrough.
• Code reviewers – jump directly to the file behind any diagram node.
• AI‑powered tools – agents that need a structural overview can call the MCP endpoint.
• Educators / Docs writers – generate visual and video assets for open‑source projects with minimal effort.

---

Getting Started (quick checklist)

1. Visit the live service – https://gitdiagram.com/owner/repo.
2. Add a private repo – click Private Repos in the header, paste a GitHub token.
3. Watch the video – click Video or append /video to the URL.
4. Export – use the PNG or Copy Mermaid buttons.
5. Integrate with AI – add the MCP URL to your preferred AI client (Claude, Cursor, VS Code, etc.).

---

License & Support

• License: MIT (see LICENSE).
• Funding: Ko‑fi link and a sponsor badge for Sent (SMS/WhatsApp API).

---

All information above is taken directly from the repository’s README; no external assumptions have been added.