【亲测免费】 GitDiagram 使用教程

1. 项目介绍

GitDiagram 是一个开源项目，它可以将任何 GitHub 仓库转化为一个交互式的图表，用于可视化和浏览代码库。这个工具特别适合那些想要深入了解开源项目结构，但又觉得代码库过于庞大难以手动梳理的开发者。GitDiagram 通过使用 Mermaid.js 和 OpenAI 的 o3-mini 生成图表，提供了快速且准确的可视化体验。

2. 项目快速启动

环境准备

在开始之前，请确保您的系统中安装了以下依赖：

• Docker
• Node.js 和 npm
• Python

克隆仓库

首先，克隆 GitDiagram 的 GitHub 仓库：

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

安装依赖

在项目目录中，安装所有必要的依赖：

pnpm i

配置环境变量

复制 .env.example 文件为 .env 并编辑它，填入您的Anthropic API密钥和可选的GitHub个人访问令牌：

cp .env.example .env

编辑 .env 文件：

ANTHROPIC_API_KEY=your_anthropic_api_key
GITHUB_PERSONAL_ACCESS_TOKEN=your_github_token

启动后端

使用 Docker Compose 启动后端服务：

docker-compose up --build -d

后端服务日志可以通过以下命令查看：

docker-compose logs -f

后端服务将运行在 localhost:8000。

启动数据库

给 start-database.sh 脚本添加执行权限，并运行它以启动 Postgres 数据库：

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

在提示生成随机密码时，输入 yes。

初始化数据库架构

使用以下命令初始化数据库架构：

pnpm db:push

运行前端

在另一个终端，启动前端服务：

pnpm dev

现在，您可以通过 localhost:3000 访问网站。

3. 应用案例和最佳实践

• 代码审查: 使用 GitDiagram 生成图表，可以帮助团队在代码审查时快速理解代码结构。
• 新项目上手: 对于新加入项目的开发者，GitDiagram 可以快速提供项目概览，便于上手。
• 教学工具: 在编程教学中，GitDiagram 可用于展示项目结构，帮助学生理解大型项目的组织方式。

4. 典型生态项目

GitDiagram 可以与以下生态项目结合使用，以增强其功能和实用性：

• GitHub Actions: 集成 CI/CD 流程，自动生成和更新图表。
• Vercel: 部署前端应用，提高访问速度和稳定性。
• PostHog: 集成 Analytics，用于跟踪用户行为和图表使用情况。

通过上述教程，您应该能够成功搭建和运行 GitDiagram，开始使用它来可视化 GitHub 仓库。