Visualize any GitHub codebase: free interactive architecture diagrams and one-minute explainer videos. Replace 'hub' with 'diagram' in any GitHub URL.

GitDiagram – 빠른 개요

무엇을 하나요 – 공개 또는 비공개 GitHub 리포지토리를 인터랙티브한 아키텍처 다이어그램(Mermaid)과 코드베이스를 안내하는 1분 내외의 음성 설명 동영상으로 전환합니다.

왜 중요한가요 – 프로젝트 구조를 이해하려면 수많은 파일을 읽어야 합니다. GitDiagram는 이를 자동화하여 개발자와 AI 에이전트가 즉시 구성 요소 간 연결을 파악하고 소스 코드로 바로 이동할 수 있게 해줍니다.

핵심 기능 (README에 설명됨)

기능	제공되는 것	작동 방식 (개요)
인터랙티브 다이어그램	폴더/파일을 기반으로 한 Mermaid 기반 시각화. 클릭하면 GitHub에서 해당 코드가 열림.	서비스는 리포지토리를 클론하고 디렉터리 트리와 import 문을 분석한 후, 웹사이트에서 렌더링되는 Mermaid 구문을 생성합니다.
1분 내외의 음성 설명 동영상	리포지토리의 목적, 주요 구성 요소, 설계 결정을 설명하는 짧은 동영상(가로 또는 세로). 자막이 내장되어 있음.	Claude 또는 GPT로 스크립트 생성, Claude/GPT로 장면 계획, OpenRouter의 Gemini 3.8 Flash TTS로 음성 생성.
내보내기 옵션	다이어그램의 PNG 내보내기 또는 원시 Mermaid 소스 복사/붙여넣기.	간단한 UI 버튼. Mermaid 소스는 서버에 저장되어 다운로드 가능.
비공개 리포지토리 지원	UI 헤더에서 GitHub 개인 액세스 토큰을 입력하여 비공개 리포지토리에 접근 가능.	토큰은 백엔드로 전송되며, 백엔드에서 리포지토리를 백그라운드에서 클론합니다.
AI 에이전트 통합 (MCP 서버)	원격 MCP 엔드포인트 (`https://gitdiagram.com/mcp`)를 제공. 아키텍처 데이터, 구성 요소 목록, 연결 관계, Mermaid 소스, 동영상 URL을 반환.	인증 필요 없음. 에이전트는 엔드포인트를 쿼리하고 JSON 형식의 설명을 받을 수 있음.
로컬 개발	Next.js + Bun으로 전체 서비스를 자체 실행 가능. Cloudflare R2, Upstash Redis, OpenAI/OpenRouter 키 필요.	`bun install` → `.env.example` 복사 → 키 입력 → `bun run dev`.

사용 방법

웹 UI – https://gitdiagram.com/owner/repo에 접속 (또는 GitHub URL의 hub를 diagram으로 바꿔도 됨). 페이지에는 인터랙티브 다이어그램과 Video 버튼이 표시됨.
AI 에이전트 – MCP 서버 URL을 Claude, Cursor, VS Code, Gemini CLI, Copilot CLI 등에 추가. "How is fastapi/fastapi structured?" 와 같은 질문을 하면 에이전트는 다이어그램과 설명을 가져옴.
자체 호스팅 – 리포지토리를 클론하고 Bun을 설치, 필요한 클라우드 서비스(R2, Redis)와 API 키를 설정한 후 bun run dev 실행. .env에서 VIDEO_EXPLAINER_ENABLED와 음성 API 키를 활성화하면 동영상 생성 가능.

기술 스택 (README에서)

프론트엔드: Next.js, React, TypeScript, Tailwind CSS, Mermaid로 다이어그램 렌더링.
백엔드: Bun(빠른 JavaScript 런타임)에서 실행. 생성된 자산은 Cloudflare R2에 저장, 메타데이터는 Upstash Redis에 캐시.
AI 구성 요소: OpenAI/OpenRouter로 코드 분석 프롬프트, Claude/GPT로 스크립트 생성, Gemini 3.8 Flash로 텍스트-음성 변환.
배포: Vercel에서 호스팅. 장애 시 백업으로 Railway/Docker 사용.

누가 도움을 받을 수 있나요?

개발자 – 새로운 코드베이스에 참여할 때 빠른 시각적 맵과 동영상 안내를 통해 이해.
코드 리뷰어 – 다이어그램의 어떤 노드든 클릭해 바로 해당 파일로 이동 가능.
AI 기반 도구 – 구조적 개요가 필요한 에이전트는 MCP 엔드포인트를 호출할 수 있음.
교육자 / 문서 작성자 – 최소한의 노력으로 오픈소스 프로젝트용 시각적 및 동영상 자산 생성 가능.

시작하기 (빠른 체크리스트)

라이브 서비스 방문 – https://gitdiagram.com/owner/repo.
비공개 리포지토리 추가 – 헤더의 "Private Repos" 클릭 후 GitHub 토큰 붙여넣기.
동영상 시청 – "Video" 버튼 클릭 또는 URL에 /video 추가.
내보내기 – PNG 또는 "Copy Mermaid" 버튼 사용.
AI와 통합 – MCP URL을 선호하는 AI 클라이언트(Claude, Cursor, VS Code 등)에 추가.

라이선스 및 지원

라이선스: MIT (LICENSE 참조).
후원: Ko-fi 링크 및 Sent (SMS/WhatsApp API)의 스폰서 배지.

위 정보는 리포지토리의 README에서 직접 가져왔으며, 외부 가정은 전혀 추가하지 않았습니다.

ahmedkhaleel2004/gitdiagram