GitDiagram

com.gitdiagram由 gitdiagram.com 發布官方發布者v1.0.0更新於 Oct 24, 2026

Architecture diagrams, explanations and Mermaid source for public GitHub repositories.

已驗證Streamable HTTP可網頁執行知識與記憶開發者工具

概覽

AI 產生的概覽

遠端 MCP 伺服器，讓助理取得公開 GitHub 儲存庫的架構說明、元件組成與 Mermaid 流程圖，以及講解影片。

可以做什麼
  • 取得儲存庫架構：文字說明、附原始碼路徑的主要元件、元件之間的連結關係，以及整體 Mermaid 流程圖
  • 依擁有者或儲存庫名稱搜尋 GitDiagram 已存的圖表庫，最多回傳 10 筆相符結果與連結
  • 取得某個儲存庫既有的旁白講解影片，包含標題、長度與完整逐字稿
適用情境
適合在需要快速認識一個陌生的公開 GitHub 程式碼庫時使用，或依名稱查找、比較儲存庫而不必自行通讀原始碼。也可用來調閱既有的約一分鐘專案講解影片。
執行需求
遠端 MCP 端點；託管服務不需金鑰或登入。任何支援遠端 HTTP 伺服器的 MCP 用戶端皆可連線。若改為在本機執行，則需要 Bun、Cloudflare R2、Upstash Redis，以及 OpenAI 或 OpenRouter 的 API 金鑰。
安裝前請注意
託管工具僅涵蓋公開儲存庫；私有儲存庫需在網頁端使用 GitHub 權杖，而非透過此伺服器。架構說明與圖表由 AI 產生，應視為入門參考而非權威文件。影片產生功能處於早期存取階段，目前只能觀看既有的影片。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 GitDiagram，將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Web executable，透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。

交給代理程式安裝

把這段提示詞貼上到 Claude Code、Codex、Cursor 等代理程式，或 SourceWeft 對話中。代理程式會讀取該伺服器的安裝指南，先向你展示發布者、端點和登入方式，經你同意後再把它新增到你的客戶端。金鑰不會寫進任何命令。

閱讀 https://sourceweft.com/mcp/com.gitdiagram%2Fgitdiagram/install.md，並按其中說明把這個 MCP 伺服器接入我的客戶端。修改任何設定之前，先告訴我它的發布者、端點和登入方式，等我確認。不要把 API 金鑰寫進命令或我會提交的檔案；問我金鑰應從哪裡取得。

檢視代理程式所依據的安裝指南

其他 MCP 客戶端

把它新增到你客戶端的 mcpServers 設定中。

{
  "mcpServers": {
    "gitdiagram": {
      "type": "http",
      "url": "https://gitdiagram.com/mcp"
    }
  }
}

README

GitDiagram

Visualize any codebase: turn any public or private GitHub repository into an interactive architecture diagram, or watch it explained in a one-minute narrated video. AI agents can use it too, through the MCP server or the Markdown version of any diagram (gitdiagram.com/owner/repo.md).

Try GitDiagram → · Or replace hub with diagram in any GitHub repository URL.

[GitDiagram front page]

[License] [Ko-fi]

[CodeRabbit]   Sponsored

AI code reviews for your pull requests. Try CodeRabbit →

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 GitDiagram explain itself in a minute]

  • 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.

Use GitDiagram from AI agents

GitDiagram is a remote MCP server at https://gitdiagram.com/mcp (no key or sign-in). Agents can read a public repository's architecture explanation, components, connections and Mermaid source, search the stored diagrams, and get explainer videos.

[Add to Claude] [Install in Cursor] [Install in VS Code] [Install in VS Code Insiders]

bash
# Claude Code: the plugin adds the MCP server and a /gitdiagram skillclaude plugin marketplace add ahmedkhaleel2004/gitdiagramclaude plugin install gitdiagram@gitdiagram# ...or just the MCP serverclaude mcp add --transport http gitdiagram https://gitdiagram.com/mcp
# Codexcodex mcp add gitdiagram --url https://gitdiagram.com/mcp
# Gemini CLIgemini extensions install https://github.com/ahmedkhaleel2004/gitdiagram
# GitHub Copilot CLIcopilot mcp add --transport http gitdiagram https://gitdiagram.com/mcp

In other clients (ChatGPT, Windsurf, Zed, LM Studio, Goose and more), add a remote MCP server with the URL https://gitdiagram.com/mcp. Then ask something like "how is fastapi/fastapi structured?".

Run locally

Requires Bun, Cloudflare R2, Upstash Redis, and an OpenAI or OpenRouter API key. See the setup guide for prerequisites and configuration.

bash
git clone https://github.com/ahmedkhaleel2004/gitdiagram.gitcd gitdiagrambun installcp .env.example .env

Fill in .env using the configuration guide, then start the app:

bash
bun run dev

Open localhost:3000.

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 Cloudflare Workers.

Contributions are welcome. Open an issue or pull request with a focused description and verification notes.

Inspired by Romain Courtois's Gitingest.

來源：README.md，提交 f2a6d23

工具

3

get_repository_diagram

Get a GitHub repository's architecture diagram

Get the architecture of a public GitHub repository from GitDiagram (gitdiagram.com): a written explanation of how the codebase is organized, its main components with the source paths they live in, how those components connect, and a Mermaid flowchart of the whole system, plus a link to the interactive diagram, where every component opens its code on GitHub. Use it whenever the user wants to understand, visualize, map or explain a GitHub repository's or open-source project's architecture, structure, main modules or data flow, wants an overview before reading unfamiliar code, or asks for an architecture or system diagram of a repo. Read-only and fast: it returns the diagram GitDiagram has already made. If none exists yet, it returns a link that makes one when opened in a browser. Public repositories only. In chat apps that show interactive views, the result also appears as a zoomable diagram whose components open their code on GitHub.

輸入參數repository必填

find_repository_diagrams

Search GitDiagram's architecture diagrams

Search GitDiagram's library of ready-made architecture diagrams of public GitHub repositories by owner or repository name. Matches any part of "owner/repo" (e.g. "langchain", "vercel/", "react-native") and returns up to 10 repositories, most-starred first, each with its interactive diagram link. Use it to find a project's exact owner/repo from its name, or to list which repositories of an owner or topic already have diagrams. It searches repository names only, not code or file contents.

輸入參數limitquery必填

get_explainer_video

Get a GitHub repository's explainer video

Get GitDiagram's narrated explainer video of a public GitHub repository, if one has been made: the link to watch and share it, its title and length, and the full narration transcript, a plain-language walkthrough of what the project is for, what people do with it and how its main parts fit together. Use it when the user wants a video about a repository, something to watch or share instead of read, or a short spoken-style summary of a project. Read-only: it never makes a video; when none exists it says so and links the page where one can be made.

輸入參數repository必填

版本歷史

1
  1. v1.0.0最新Sep 30, 2026

評分

已滿足適用檢查項的 100%

該評分衡量此收錄條目的完整程度，依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價，也不表示伺服器安全或目前可用：可連通性是帶日期的檢查結果，評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通必需25 分
  • 已宣告認證方式必需10 分
  • 已列出工具必需15 分
  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分