GitDiagram 是一个面向代码仓库可视化的工具,主要用途是将 GitHub 上的代码库自动转换为交互式架构图,并生成简短的讲解视频,帮助开发者快速理解项目结构。
主要能力:
- 将任意公开或私有 GitHub 仓库转换为交互式架构图,并附带流式解释。
- 生成约一分钟的旁白讲解视频,视频先介绍项目用途和人们如何使用它,然后简要展示主要部分如何组合以及底层的一个决策。
- 点击架构图中的任意组件,可跳转到其关联的文件或目录。
- 支持通过 GitHub token 访问私有仓库(在页头选择 Private Repos)。
- 可将架构图导出为 PNG,或复制 Mermaid 源码。
- 提供远程 MCP 服务器(https://gitdiagram.com/mcp),无需密钥或登录,AI 智能体可读取公开仓库的架构解释、组件、连接和 Mermaid 源码,搜索已存储的架构图,并获取讲解视频。
- 提供 Markdown 版本的架构图,格式为 gitdiagram.com/owner/repo.md。
使用方式:
- 在任意 GitHub 仓库 URL 中,将“hub”替换为“diagram”即可访问对应架构图。
- 在架构图 URL 后添加 /video 可查看讲解视频,例如 gitdiagram.com/owner/repo/video。
- 视频可下载为 MP4,支持横向或竖向(9:16),并带有烧录字幕。
- 在 ChatGPT、Windsurf、Zed、LM Studio、Goose 等客户端中,添加远程 MCP 服务器 URL https://gitdiagram.com/mcp,然后提问类似“fastapi/fastapi 的结构是怎样的?”。
- 本地运行需要 Bun、Cloudflare R2、Upstash Redis 以及 OpenAI 或 OpenRouter API 密钥。填写 .env 后启动应用,访问 localhost:3000。
- 讲解视频默认关闭,需在 .env 中设置 VIDEO_EXPLAINER_ENABLED=1、NEXT_PUBLIC_VIDEO_EXPLAINER=1、ANTHROPIC_API_KEY、OPENAI_API_KEY 和 OPENROUTER_API_KEY(用于语音)来开启。
适用场景:
- 开发者快速理解陌生代码库的架构。
- 通过视频向他人介绍项目结构。
- AI 智能体通过 MCP 获取仓库架构信息以辅助编程或分析。
限制:
- 生成新视频目前处于早期访问阶段,任何人都可以观看已存在的视频。
- 本地部署需要特定的技术栈和 API 密钥。
- 视频生成依赖 Claude 或 GPT 生成脚本和场景,以及 OpenRouter(Gemini 3.8 Flash TTS)生成语音。
- 项目基于 Next.js、React、TypeScript、Tailwind CSS 和 Mermaid 构建,部署在 Cloudflare Workers 上。