GitDiagram

Name: GitDiagram
Author: gitdiagram.com

远程服务

gitdiagram.com开发工具18.5k2 天前更新

代码仓库访问官网

关于 GitDiagram

GitDiagram 可将 GitHub 仓库转为交互式架构图、说明和旁白视频，面向开发者与 AI Agent。它支持从图中跳转到代码，并导出 Mermaid 源码。

主要功能

01AI 生成架构图
02流式架构说明
03仓库旁白视频
04组件链接到代码
05导出 PNG 和 Mermaid
06使用 GitHub token 访问私有仓库

适用场景

01了解仓库结构
02从图中定位源文件
03分享简短的项目讲解

MCP 相关

远程 MCP 服务 https://gitdiagram.com/mcp 向 Agent 提供公开仓库的架构说明、组件、连接关系、Mermaid 源码、已存图表搜索及讲解视频。

配置

远程服务无需本地安装。选择你使用的客户端，复制配置或使用一键安装。

服务地址https://gitdiagram.com/mcp

一键复制安装命令

Claude CodeTerminalclaude mcp add --transport http com-gitdiagram-gitdiagram https://gitdiagram.com/mcp

Cursor.cursor/mcp.json{"mcpServers":{"com-gitdiagram-gitdiagram":{"type":"http","url":"https://gitdiagram.com/mcp"}}}在 Cursor 中打开

VS Code.vscode/mcp.json{"servers":{"com-gitdiagram-gitdiagram":{"type":"http","url":"https://gitdiagram.com/mcp"}}}在 VS Code 中打开

Claude Desktopclaude_desktop_config.json{"mcpServers":{"com-gitdiagram-gitdiagram":{"type":"http","url":"https://gitdiagram.com/mcp"}}}

Windsurf~/.codeium/windsurf/mcp_config.json{"mcpServers":{"com-gitdiagram-gitdiagram":{"serverUrl":"https://gitdiagram.com/mcp"}}}

命令在终端中运行；JSON 粘贴到对应客户端的 MCP 配置后重启。需要授权的服务会在首次连接时提示登录。

工具

参数	类型	必填	说明
repository	string	是	GitHub 仓库，格式为 "owner/repo"（例如 "fastapi/fastapi"），或仓库中的任意 github.com URL（例如 "https://github.com/vercel/next.js/tree/canary/packages"）。

详细介绍

GitDiagram

可视化任何代码库：将任意公开或私有的 GitHub 仓库转换成交互式架构图，或观看时长约一分钟的讲解视频。AI Agent 也可以通过 MCP 服务或任意架构图的 Markdown 版本（gitdiagram.com/owner/repo.md）使用它。

试用 GitDiagram → · 或将任意 GitHub 仓库 URL 中的 hub 替换为 diagram。

_赞助商

为你的拉取请求提供 AI 代码审查。试用 CodeRabbit →

新功能：讲解视频

GitDiagram 现在可以将仓库转换成时长约一分钟的讲解视频。视频会先介绍项目的用途以及人们如何使用它，然后简要展示其主要部分如何协同工作，以及其中一项设计决策。

观看视频集锦 →，或在任意架构图 URL 后添加 /video，例如 gitdiagram.com/owner/repo/video。
下载 MP4，可选择横屏或竖屏（9:16），并内嵌字幕。
**新视频制作目前处于早期访问阶段。**任何人都可以观看已有视频。

功能

观看仓库讲解视频，或在任意架构图页面点击 Video。
探索架构，查看 AI 生成的架构图和流式讲解。
跳转到代码，点击组件关联的文件或目录即可。
使用私有仓库，通过页眉中的 Private Repos 使用 GitHub 令牌。
导出架构图为 PNG，或复制 Mermaid 源代码。

在 AI Agent 中使用 GitDiagram

GitDiagram 是一个远程 MCP 服务，地址为 https://gitdiagram.com/mcp（无需密钥或登录）。Agent 可以读取公开仓库的架构说明、组件、连接关系和 Mermaid 源代码，搜索已存储的架构图，并获取讲解视频。

# Claude Code: the plugin adds the MCP server and a /gitdiagram skill
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

# Codex
codex mcp add gitdiagram --url https://gitdiagram.com/mcp

# Gemini CLI
gemini extensions install https://github.com/ahmedkhaleel2004/gitdiagram

# GitHub Copilot CLI
copilot mcp add --transport http gitdiagram https://gitdiagram.com/mcp

在其他客户端（ChatGPT、Windsurf、Zed、LM Studio、Goose 等）中，添加地址为 https://gitdiagram.com/mcp 的远程 MCP 服务。然后可以询问类似“fastapi/fastapi 的结构是怎样的？”这样的问题。

本地运行

需要 Bun、Cloudflare R2、Upstash Redis，以及 OpenAI 或 OpenRouter API 密钥。前置条件和配置请参阅设置指南。

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

按照配置指南填写 .env，然后启动应用：

bun run dev

打开 localhost:3000。

默认关闭视频解说。要启用它们，请在 .env 中设置 VIDEO_EXPLAINER_ENABLED=1、NEXT_PUBLIC_VIDEO_EXPLAINER=1、ANTHROPIC_API_KEY、OPENAI_API_KEY 和 OPENROUTER_API_KEY（用于语音）。其他视频设置请参阅 .env.example。