SuperAPI AI Directory
Partner with us中文AI newsFavorites
All toolsAI codinggitdiagram

gitdiagram

GitDiagram is a tool for visualizing GitHub code repositories. It can convert any public or private repository into an interactive architecture diagram and generate an approximately one-minute explanatory video. Users only need to replace "hub" with "diagram" in the GitHub URL to use it, and can also let AI agents read architecture information through the MCP server. It supports clicking components to jump to the corresponding code, exporting PNGs or copying the Mermaid source, and provides features such as private repository access and video downloads.

Open website

About this tool

GitDiagram is a tool for code repository visualization. Its main purpose is to automatically convert codebases on GitHub into interactive architecture diagrams and generate short explanatory videos to help developers quickly understand project structure.

Main capabilities:

  • Convert any public or private GitHub repository into an interactive architecture diagram, with streaming explanations.
  • Generate an approximately one-minute narrated explanatory video. The video first introduces what the project is for and how people use it, then briefly shows how the main parts fit together and one underlying decision.
  • Click any component in the architecture diagram to jump to its associated file or directory.
  • Support access to private repositories via a GitHub token (select Private Repos in the page header).
  • Export the architecture diagram as a PNG, or copy the Mermaid source.
  • Provide a remote MCP server (https://gitdiagram.com/mcp），无需密钥或登录，AI agents can read the architecture explanation, components, connections, and Mermaid source of public repositories, search stored architecture diagrams, and retrieve explanatory videos.
  • Provide a Markdown version of the architecture diagram in the format gitdiagram.com/owner/repo.md.

How to use:

  • In any GitHub repository URL, replace "hub" with "diagram" to access the corresponding architecture diagram.
  • Add /video after the architecture diagram URL to view the explanatory video, for example gitdiagram.com/owner/repo/video.
  • Videos can be downloaded as MP4, support landscape or vertical (9:16), and include burned-in subtitles.
  • In clients such as ChatGPT, Windsurf, Zed, LM Studio, and Goose, add the remote MCP server URL https://gitdiagram.com/mcp，然后提问类似“fastapi/fastapi what is its structure?".
  • Running locally requires Bun, Cloudflare R2, Upstash Redis, and an OpenAI or OpenRouter API key. After filling in .env, start the application and visit localhost:3000.
  • Explanatory videos are disabled by default. To enable them, set VIDEO_EXPLAINER_ENABLED=1, NEXT_PUBLIC_VIDEO_EXPLAINER=1, ANTHROPIC_API_KEY, OPENAI_API_KEY, and OPENROUTER_API_KEY (for voice) in .env.

Use cases:

  • Developers quickly understanding the architecture of an unfamiliar codebase.
  • Introducing project structure to others through videos.
  • AI agents obtaining repository architecture information through MCP to assist with programming or analysis.

Limitations:

  • Generating new videos is currently in early access; anyone can watch existing videos.
  • Local deployment requires a specific tech stack and API keys.
  • Video generation relies on Claude or GPT to generate scripts and scenes, and on OpenRouter (Gemini 3.8 Flash TTS) to generate voice.
  • The project is built on Next.js, React, TypeScript, Tailwind CSS, and Mermaid, and is deployed on Cloudflare Workers.

Related tools

Browse category