개요
GitDiagram은 몇 초 만에 모든 공개 또는 비공개 GitHub 저장소를 인터랙티브 시스템 아키텍처 다이어그램으로 변환해 주는 웹 애플리케이션입니다. AI 아키텍처 개요와 컴포넌트 다이어그램을 스트리밍 방식으로 생성하며, 컴포넌트를 클릭하면 실제 소스 파일로 이동할 수 있고, Mermaid 또는 PNG로 내보낼 수 있습니다. Next.js 기반으로 구축되었으며, 비공개 저장소와 결과 캐싱을 지원하여 중복 생성을 방지합니다.
README 미리보기
[](https://gitdiagram.com/)\n\n\n[](https://ko-fi.com/ahmedkhaleel2004)\n\n# GitDiagram\n\nTurn any public or private GitHub repository into an interactive architecture diagram in seconds.\n\nYou can also replace `hub` with `diagram` in a GitHub URL to open its diagram.\n\n> **Sponsor slot:** Reach developers while they are actively exploring codebases. [Sponsor GitDiagram](https://gitdiagram.com/sponsor).\n\n## Features\n\n- **Architecture-first diagrams:** converts a repository tree, README, and bounded source excerpts into a system-level graph instead of merely drawing folders.\n- **Interactive source links:** click a component to open its real file or directory on GitHub.\n- **Streaming generation:** see the explanation arrive while the graph is planned.\n- **Private repositories:** provide a GitHub token locally in the browser; private artifacts use a separate protected storage namespace.\n- **Export:** copy Mermaid source or download the rendered diagram as PNG.\n- **Provider choice:** OpenAI by default, with OpenRouter available for self-hosted deployments.\n\n## Stack\n\n- **Application:** Next.js 16 App Router, React 19, TypeScript, Tailwind CSS, and Radix UI\n- **Generation API:** same-origin Next.js Route Handlers running on Vercel's Bun runtime\n- **Storage:** Cloudflare R2 for diagram artifacts\n- **Coordination:** Upstash Redis for quota accounting, cancellation, locks, and short-lived failure state\n- **AI:** OpenAI or OpenRouter through `AI_PROVIDER`\n- **Analytics:** PostHog\n- **Deployment:** Vercel is the only live runtime; an offline Railway/Docker recipe is retained for disaster recovery\n\nThere is no separate FastAPI implementation, Postgres database, or Neon runtime.\n\n## Production architecture\n\nVercel serves both the UI and the generation endpoints:\n\n- `/api/generate/cost` estimates a run after bounded GitHub ingestion, same-origin and rate limited.\n- `/api/generate/stream` streams Server-Sent Events for explanation and graph progress
FAQ (3)
문제 해결GitDiagram에서 신규 방문자에게도 'You exceeded your current quota, please check your plan and billing details' 오류가 표시되는 이유는 무엇인가요?
이 오류는 사용자 본인의 사용량 때문에 발생하는 것이 아니라, GitDiagram의 공유 서버 측 OpenAI API 할당량이 소진되었을 때 나타나며, 처음 방문하는 사용자를 포함한 모든 방문자가 차단됩니다. 유지 관리자가 문제가 해결되었음을 확인했으므로, gitdiagram.com을 새로고침하고 다시 시도하세요. 호스팅된 사이트가 다시 할당량 제한에 도달하면, 본인의 API 키로 GitDiagram을 직접 호스팅하세요: 1) git clone https://github.com/ahmedkhaleel2004/gitdiagram.git && cd gitdiagram 2) .env.example을 .env로 복사하고 OPENAI_API_KEY를 설정하세요 3) docker compose up --build를 실행하고 로컬 인스턴스를 여세요. 자체 호스팅은 요금 청구가 본인의 OpenAI 계정을 통해 이루어지므로 공유 할당량을 완전히 우회합니다.
문제 해결GitDiagram에서 'Syntax error in text' Mermaid 버전 11.4.1 오류를 수정하는 방법은?
이 오류는 GitDiagram이 생성한 Mermaid 다이어그램 코드에 Mermaid v11.4.1에서 유효하지 않은 구문이 포함될 때 발생합니다. 이는 영구적인 버그가 아닌 일시적인 생성 실패입니다. 해결 방법: 동일한 GitHub 저장소 URL을 다시 제출해 보세요 — 여러 사용자가 두 번째 시도에서 다이어그램이 성공적으로 생성되었다고 확인했습니다. 여러 번 재시도해도 오류가 계속되면 저장소의 구조가 Mermaid 파싱을 깨뜨리는 문자를 생성하는 것일 수 있습니다. 나중에 다시 시도하거나 GitDiagram/Mermaid 버전 업데이트를 확인하세요.
문제 해결Mermaid 버전 11.4.1에서 LLM이 생성한 다이어그램을 렌더링할 때 발생하는 'Syntax error in text' 오류를 해결하는 방법은?
이 오류는 LLM이 간혹 구문 명세를 위반하는 Mermaid 코드를 생성하기 때문에 발생합니다. 해결 방법: 프롬프트에 명시적인 제약 조건을 추가하세요. 예: '공식 Mermaid 구문을 엄격히 준수하고 버전 11.4.1과 호환되는 유효한 Mermaid 코드만 출력해야 합니다. 다이어그램 블록 외부에 설명 텍스트를 포함하지 마세요.' 또한 특수 문자(괄호, 대괄호, 슬래시)가 포함된 노드 레이블은 따옴표로 묶고, 유효한 화살표 구문(-->, -->|label|)을 사용하며, 노드 ID에 지원되지 않는 문자를 사용하지 않도록 모델에 상기시키세요. 오류가 계속되면 렌더링 전에 Mermaid Live Editor(https://mermaid.live)에서 생성된 코드를 검증하여 문제가 발생하는 줄을 정확히 찾아내세요.