这个仓库名为 gitdiagram，其主要功能是能在数秒内将任意 GitHub 仓库转化为交互式图表，方便用户对仓库结构进行可视化。以下是对该仓库的详细介绍：

功能特性

• 即时可视化：可将任意 GitHub 仓库结构转换为系统设计或架构图。
• 交互性：用户点击图表中的组件，能够直接跳转到对应的源文件和相关目录。
• 快速生成：借助 OpenAI o4 - mini 模型，实现快速且准确的图表生成。
• 可定制化：支持用户通过自定义指令对图表进行修改和重新生成。
• API 访问：提供公共 API 用于集成，不过此功能仍在开发中（WIP）。

技术栈

• 前端：采用 Next.js、TypeScript、Tailwind CSS 和 ShadCN 构建。
• 后端：使用 FastAPI、Python 和 Server Actions 实现。
• 数据库：采用 PostgreSQL 数据库，并通过 Drizzle ORM 进行操作。
• AI：运用 OpenAI o4 - mini 模型。
• 部署：前端部署在 Vercel 平台，后端部署在 EC2 上。
• CI/CD：借助 GitHub Actions 实现持续集成和持续部署。
• 分析：使用 PostHog 和 Api - Analytics 进行数据分析。

代码结构

• 后端：位于 backend 目录下，包含 Dockerfile、应用代码、部署脚本、Nginx 配置和依赖文件 requirements.txt。
• 前端：src 目录是前端代码的主要存放处，涵盖了 app、components、hooks、lib、server 和 styles 等子目录。
• 配置文件：包含 .env.example、.eslintrc.cjs、.gitignore、drizzle.config.ts、next.config.js、package.json、pnpm - lock.yaml 等，用于项目的配置和依赖管理。
• 脚本文件：start - database.sh 用于启动本地开发数据库的 Docker 容器。

关键代码片段

1. GitHub 服务：gitdiagram/backend/app/services/github_service.py 文件中的 GitHubService 类，负责与 GitHub API 进行交互，包括检查仓库是否存在、获取默认分支、获取文件路径列表以及读取 README 文件等功能。
2. 缓存操作：gitdiagram/src/app/_actions/cache.ts 文件包含了缓存图表和解释信息的函数，以及获取缓存解释信息的函数。
3. 图表生成：gitdiagram/src/app/[username]/[repo]/page.tsx 文件中的 Repo 组件，负责显示仓库的图表、处理错误和加载状态，并提供一些操作按钮，如修改、重新生成、复制和导出图像等。

本地开发步骤

1. 克隆仓库

git clone https://github.com/ahmedkhaleel2004/gitdiagram.git
cd gitdiagram

1. 安装依赖

pnpm i

1. 设置环境变量

cp .env.example .env

然后编辑 .env 文件，添加 Anthropic API 密钥和可选的 GitHub 个人访问令牌。 4. 运行后端

docker-compose up --build -d

可通过 docker - compose logs -f 查看日志，FastAPI 服务器将在 localhost:8000 上运行。 5. 启动本地数据库

chmod +x start-database.sh
./start-database.sh

当提示生成随机密码时，输入 yes，Postgres 数据库将在 localhost:5432 的容器中启动。 6. 初始化数据库模式

pnpm db:push

可使用 pnpm db:studio 查看和操作数据库。 7. 运行前端

pnpm dev

通过上述步骤，开发者可以在本地环境中搭建并运行该项目。

官网

github