GitDiagram

GitDiagram converts any public or private GitHub repository into an interactive architecture diagram. It's aimed at developers who want a fast visual overview of an unfamiliar codebase, maintainers who want to document their project's structure, and AI agents that need a quick summary of how a repo is built. You can use it straight from the browser, pull the Markdown version of a diagram, or connect to it as an MCP server from an AI client.

The core trick is simple: swap hub for diagram in any GitHub repo URL and GitDiagram generates a diagram on the fly. Each component in the diagram links back to the actual file or directory in the repo, so you can jump from a visual block straight to the code behind it.

Key features

• AI-generated diagrams: produces a Mermaid-based architecture diagram with a streamed explanation of how the pieces fit together.
• Clickable components: every node in the diagram links to its corresponding file or directory in the source repo.
• Narrated explainer videos: generates a roughly one-minute video explaining what a repo does and how its parts connect, downloadable as MP4 in landscape or vertical format with burned-in captions.
• Private repo support: works on private repositories when you supply a GitHub token.
• Export options: download diagrams as PNG or copy the raw Mermaid source for use elsewhere.
• Markdown and MCP access: fetch gitdiagram.com/owner/repo.md for a text version, or connect an AI agent to the hosted MCP server to query a repo's architecture, components, connections, and Mermaid source.
• No sign-in for MCP: the remote MCP server at https://gitdiagram.com/mcp works without an API key or account.

Ideal use cases

• Onboarding to a new codebase: get a visual map of an unfamiliar project before digging into files, especially useful on large or loosely documented repos.
• Documenting your own project: generate and embed a diagram or Mermaid source for a README or wiki without drawing it by hand.
• AI agent workflows: hook an agent (Claude, Cursor, Codex, Gemini CLI, GitHub Copilot CLI, or any MCP-compatible client) up to the hosted MCP server so it can answer structural questions about a repo without you pasting code.
• Quick repo evaluation: use the narrated video or diagram to decide if a repo's architecture matches what you need before committing time to reading the source.
• Not a fit for: deep code review, dependency-level analysis, or diagrams of non-GitHub-hosted code. It generates a high-level architectural view, not a full static analysis tool, and video generation for new repos is in early access, so you may only be able to watch existing ones rather than generate your own.

Installation

To use the hosted version, go to gitdiagram.com or swap hub for diagram in any GitHub URL. No install needed for basic diagram viewing.

To use it from an AI agent via MCP, add a remote MCP server pointing at https://gitdiagram.com/mcp. No API key or sign-in is required. Example for Claude Code:

claude plugin marketplace add ahmedkhaleel2004/gitdiagram
claude plugin install gitdiagram@gitdiagram
# ...or just the MCP server
claude mcp add --transport http gitdiagram https://gitdiagram.com/mcp

For Codex, Gemini CLI, and GitHub Copilot CLI:

codex mcp add gitdiagram --url https://gitdiagram.com/mcp
gemini extensions install https://github.com/ahmedkhaleel2004/gitdiagram
copilot mcp add --transport http gitdiagram https://gitdiagram.com/mcp

To run GitDiagram locally, you need Bun, Cloudflare R2, Upstash Redis, and an OpenAI or OpenRouter API key:

git clone https://github.com/ahmedkhaleel2004/gitdiagram.git
cd gitdiagram
bun install
cp .env.example .env

Fill in .env per the configuration guide, then run:

bun run dev

Open localhost:3000. Explainer videos are off by default locally; enable them with VIDEO_EXPLAINER_ENABLED=1, NEXT_PUBLIC_VIDEO_EXPLAINER=1, and the relevant API keys (ANTHROPIC_API_KEY, OPENAI_API_KEY, OPENROUTER_API_KEY) in .env.