GitDiagram - GitHub 仓库可视化工具

GitDiagram - GitHub 仓库可视化工具

项目链接：https://github.com/ahmedkhaleel2004/gitdiagram

将任何 GitHub 仓库转换为交互式架构图，只需替换 URL 中的 hub 为 diagram。

✨ 核心功能

• 即时可视化：将代码库结构转换为系统设计/架构图
• 交互式导航：点击组件直接跳转到源文件和目录
• 快速生成：基于 Claude 3.5 Sonnet 实现快速准确的图表生成
• 自定义修改：支持通过指令修改和重新生成图表
• API 集成：提供公共 API 接口（开发中）

🚀 快速开始

1. URL 替换法：

   https://github.com/owner/repo → https://githdiagram.com/owner/repo
   

示例：https://github.com/carlosferrazza/humanoid-bench
改成：https://gitdiagram.com/carlosferrazza/humanoid-bench
大项目不行，可能要本地部署：

小项目可以https://gitdiagram.com/n8n-io/n8n

2. 网页端访问：
   直接访问 gitdiagram.com 并输入仓库地址

🔒 私有仓库支持

1. 点击导航栏 “Private Repos”
2. 提供具有 repo 权限的 GitHub 个人访问令牌

🛠️ 技术栈

组件	技术选型
前端	Next.js, TypeScript, Tailwind CSS
后端	FastAPI, Python
数据库	PostgreSQL (Drizzle ORM)
AI 模型	Claude 3.5 Sonnet
部署	Vercel (前端), EC2 (后端)
分析工具	PostHog, Api-Analytics

🖥️ 本地部署

克隆仓库
git clone https://github.com/ahmedkhaleel2004/gitdiagram.git
cd gitdiagram

安装依赖
pnpm i

配置环境变量
cp .env.example .env
编辑 .env 文件添加 Anthropic API 密钥

启动后端
docker-compose up --build -d

初始化数据库
chmod +x start-database.sh
./start-database.sh

启动前端
pnpm dev

访问 localhost:3000 即可使用

🤝 贡献指南

欢迎提交 Pull Request！建议步骤：

1. Fork 仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

📜 许可证

MIT License - 详见 LICENSE 文件

---

📌 提示：当前为免费无速率限制服务，未来可能调整
🔮 路线图：计划实现字体图标支持和嵌入式图表功能（类似 star-history.com）