GitDiagram: 코드를 읽지 않고 10K+ 라인 GitHub 저장소 이해하기
대규모 코드베이스를 탐색하고 이해하는 것은 특히 새로운 개발자나 오래된 저장소를 다시 살펴볼 때 어려울 수 있습니다. GitDiagram은 GitHub 저장소를 대화형 다이어그램으로 변환하여 코드베이스 아키텍처를 시각적으로 표현함으로써 이 문제를 해결합니다. 이 도구는 복잡한 시스템을 이해하고 개발팀 간의 협업을 향상시키는 데 도움이 됩니다. 이 글에서는 로컬에서 GitDiagram을 사용하는 단계별 과정을 안내해 드리겠습니다.
GitDiagram 로컬 사용 가이드
1단계: GitDiagram 저장소 복제하기
```
git clone https://github.com/ahmedkhaleel2004/gitdiagram.git
cd gitdiagram
```
2단계: 종속성 설치하기
이 단계에서는 node_modules에 종속성을 가져와 설치합니다.
```
pnpm i
```
pnpm install을 실행하기 전에 Node.js와 pnpm이 전역적으로 설치되어 있는지 확인하세요.
- Node.js는 nodejs.org에서 다운로드할 수 있습니다
- pnpm을 설치하려면 다음 명령어를 실행하세요:
```
npm install -g pnpm
```
3단계: 환경 변수 설정하기
```
cp .env.example .env
```
.env 파일을 편집하여 OpenAI / Anthropic / OpenRouter API 키와 선택적으로 GitHub 개인 액세스 토큰을 포함시키세요.
4단계: 백엔드 서비스 시작하기
```
docker-compose up --build -d
```
FastAPI 서버는 localhost:8000에서 사용할 수 있습니다. 서버 측에서 다음 메시지가 표시됩니다.
```
{"message":"Hello from GitDiagram API!"}
```
5단계: 데이터베이스 초기화하기
데이터베이스를 설정하려면 다음 명령어를 실행하세요:
```
chmod +x start-database.sh
./start-database.sh
pnpm db:push
```
무작위 비밀번호 생성 요청이 있으면 yes를 입력하세요. Postgres 데이터베이스는 localhost:5432에서 컨테이너로 시작됩니다.
참고: 이 명령어를 실행했을 때 다음과 같은 오류가 발생할 수 있습니다:
```
sh: drizzle-kit: command not found
ELIFECYCLE Command failed.
WARN Local package.json exists, but node_modules missing, did you mean to install?
```
drizzle-kit이 설치되지 않은 것이므로 다음을 실행하세요:
```
pnpm add -D drizzle-kit
```
그 후, pnpm db:push가 제대로 작동하고 다음 출력이 표시됩니다:
```
No config path provided, using default 'drizzle.config.ts'
Reading config file '/Users/kanwal/Desktop/gitdiagram/drizzle.config.ts'
Using 'postgres' driver for database querying
[✓] Pulling schema from database...
[✓] Changes applied
```
6단계: 프론트엔드 실행하기
```
pnpm dev
```
이제 localhost:3000에서 웹사이트에 접속할 수 있으며, backend/app/routers/generate.py의 generate 함수 데코레이터에 정의된 속도 제한을 편집할 수 있습니다. 이제 fastapi 라이브러리의 github 저장소를 시각화해 봅시다.
프론트엔드 인터페이스:
출력:
결론
이것은 훌륭한 아이디어이며 정말 유용한 저장소입니다. 개인적으로 제 프로젝트에서 이와 같은 도구가 필요하다고 느꼈기 때문에, 이 프로젝트의 노력과 비전에 감사드립니다.
다만, 공정한 의견을 제시하자면 분명히 개선의 여지가 있습니다.
제가 자주 마주친 문제 중 하나는:
```
Syntax error in text mermaid version 11.4.
```
프로젝트 소유자에 따르면, 이 오류는 일반적으로 LLM이 유효하지 않은 Mermaid.js 구문을 생성했다는 것을 의미합니다.
이 문제를 해결하기 위해 온라인에서 찾은 솔루션이 실제로 제게 작동했습니다:
다이어그램 프롬프트 사용자 정의에 다음을 추가하세요: "Ignore the syntax issue from Mermaid version 11.4.1 and regenerate the remainder of the diagram."
이 라인을 사용하면 오류를 우회할 수 있습니다. 일부 구성 요소는 여전히 누락될 수 있지만, 적어도 코드베이스에 대한 상위 수준의 이해를 제공하기에 충분한 부분적인 다이어그램을 생성합니다.