GitDiagram

将任何 GitHub 仓库转换为可视化的交互式图表，几秒钟内即可生成。

你还可以将 GitHub URL 中的 hub 替换为 diagram，即可访问对应的图表。

🚀 功能亮点

  • 👀 即时可视化：将 GitHub 仓库结构转换为系统设计 / 架构图
  • 🎨 交互式操作：点击组件可直接跳转到源文件和相关目录
  • ⚡ 极速生成：由 Claude 3.5 Sonnet 提供支持，生成快速且准确的图表
  • 🔄 自定义生成：支持自定义指令，修改并重新生成图表
  • 🌐 API 接口：提供公共 API 用于集成（开发中）

⚙️ 技术栈

  • 前端：Next.js、TypeScript、Tailwind CSS、ShadCN
  • 后端：FastAPI、Python、Server Actions
  • 数据库：PostgreSQL（使用 Drizzle ORM）
  • AI：OpenAI o3-mini
  • 部署：Vercel（前端）、EC2（后端）
  • CI/CD：GitHub Actions
  • 分析：PostHog、Api-Analytics

🤔 关于

我开发这个工具是因为我想为开源项目做贡献，但很快发现它们的代码库太庞大，手动查阅效率低下。因此，我创建了 GitDiagram，帮助我快速理解项目架构——当然，它还有更多的用途！

给定任何公开（或私有）的 GitHub 仓库，GitDiagram 会使用 OpenAI 的 o3-mini（之前使用的是 Claude 3.5 Sonnet）生成 Mermaid.js 图表！

工具会从文件树和 README 中提取信息，并生成具有交互功能的图表（你可以点击组件跳转到相关文件或目录）。

绝大部分的“处理逻辑”实际上是通过 Prompt Engineering 实现的。你可以在 /backend/app/prompts.py 中查看具体实现，该文件负责提取、分析和生成图表代码的完整工作流。

🔒 如何为私有仓库生成图表

点击顶部导航栏的 “Private Repos” 按钮，按照指引提供带有 repo 权限的 GitHub 个人访问令牌（PAT）。

你也可以选择本地自托管该应用（前后端分离），具体步骤见下方。

🛠️ 自托管 / 本地开发

  1. 克隆仓库 
  1. git clone https://github.com/ahmedkhaleel2004/gitdiagram.git
  2. cd gitdiagram
  1. 安装依赖 
  1. pnpm i
  1. 配置环境变量（创建 .env 文件） 
  1. cp .env.example .env

编辑 .env 文件，填写你的 Anthropic API 密钥和可选的 GitHub 个人访问令牌。

  1. 启动后端服务 
  1. docker-compose up --build -d

你可以使用以下命令查看日志：

  1. docker-compose logs -f

FastAPI 服务将在 localhost:8000 启动。

  1. 启动本地数据库 
  1. chmod +x start-database.sh
  2. ./start-database.sh

在提示是否生成随机密码时，输入 yes。
PostgreSQL 数据库将启动在 localhost:5432。

  1. 初始化数据库结构 
  1. pnpm db:push

你可以使用以下命令查看数据库并交互：

  1. pnpm db:studio
  1. 启动前端服务 
  1. pnpm dev

前端将在 localhost:3000 启动。
你可以修改 backend/app/routers/generate.py 中的 generate 函数装饰器，调整速率限制。

💡 贡献

欢迎贡献！如有改进建议或功能补充，欢迎提交 Pull Request。

🔥 特别鸣谢

感谢 Romain Courtois 的 Gitingest 提供了灵感和样式设计参考。

📈 速率限制

当前 GitDiagram 免费提供服务，无速率限制，但未来可能会有所调整。

🚀 未来计划

  • 在图表中添加 font-awesome 图标
  • 开发类似 star-history.com 的嵌入功能，实时展示项目的架构变化
  • 支持 GitHub 仓库的实时图表更新，随着提交变更自动刷新图表