깃허브 주소를 살짝 고치면 코드 구조를 1분 영상과 다이어그램으로 보여줍니다
복잡한 코드베이스를 빠르게 파악하고 싶을 때, 저장소 URL의 'hub'를 'diagram'으로만 바꾸면 됩니다. GitDiagram은 공개 또는 비공개 깃허브 저장소를 받아 AI가 분석한 아키텍처를 인터랙티브 다이어그램으로 그려주고, 주요 구성 요소가 어떻게 연결되는지 1분 내레이션 영상으로 설명해 줍니다. 개발자는 물론 코드 구조를 빠르게 이해해야 하는 모든 사람이 이 도구를 활용할 수 있습니다.
1분 영상으로 보는 프로젝트 구조
최근 추가된 기능으로, 저장소를 1분 분량의 내레이션 영상으로 변환할 수 있습니다. 영상은 프로젝트의 목적과 사용법을 먼저 보여주고, 주요 부품들이 어떻게 맞물리는지 그리고 내부의 한 가지 결정 사항을 간략히 설명합니다. 가로형 MP4나 세로형(9:16) MP4로 자막이 포함된 상태로 다운로드할 수 있습니다. 현재 영상 생성 기능은 얼리 액세스 단계이며, 이미 생성된 영상은 누구나 볼 수 있습니다.
AI 에이전트와 연동하는 방법
GitDiagram은 원격 MCP 서버를 제공하여 AI 에이전트가 저장소 구조를 직접 읽을 수 있게 합니다. 키나 로그인 없이 https://gitdiagram.com/mcp 주소를 연결하면, 에이전트가 공개 저장소의 아키텍처 설명, 구성 요소, 연결 관계, Mermaid 소스, 저장된 다이어그램 검색, 설명 영상 등을 가져갈 수 있습니다. Claude Code, Codex, Gemini CLI, GitHub Copilot CLI 등 다양한 클라이언트에서 몇 줄의 명령어로 서버를 추가할 수 있습니다.
로컬에서 실행하기 위한 준비
로컬에서 실행하려면 Bun, Cloudflare R2, Upstash Redis, 그리고 OpenAI 또는 OpenRouter API 키가 필요합니다. 저장소를 클론한 뒤 bun install을 실행하고, .env.example을 복사해 .env 파일로 만든 후 설정 값을 채워 넣습니다. bun run dev 명령으로 앱을 시작하면 localhost:3000에서 접근할 수 있습니다. 설명 영상 기능을 활성화하려면 .env 파일에 VIDEO_EXPLAINER_ENABLED=1 등 추가 환경 변수와 Anthropic, OpenAI, OpenRouter API 키를 설정해야 합니다.
사용 전 확인 사항
이 도구는 Next.js, React, TypeScript, Tailwind CSS, Mermaid로 구축되었으며 Vercel에 배포되어 있습니다. 비공개 저장소를 사용하려면 헤더의 Private Repos 메뉴에서 GitHub 토큰을 입력해야 합니다. 다이어그램은 PNG로 내보내거나 Mermaid 소스를 복사할 수 있으며, 다이어그램의 구성 요소를 클릭하면 해당 파일이나 디렉터리로 바로 이동할 수 있습니다. 영상 생성은 초기 단계이므로 기능 안정성을 확인한 후 사용 여부를 결정하는 것이 좋습니다.
