남이 만든 코드를 처음 열면 폴더 이름만 보이지 흐름은 보이지 않는다. GitDiagram은 저장소의 파일 구조와 README를 읽어 폴더 그림이 아니라 시스템 단위의 그림으로 바꾼다. 보던 깃허브 주소에서 hub를 diagram으로 바꾸기만 해도 열린다.
이걸로 무엇을 만들 수 있나
Next.js 16·React 19·타입스크립트로 만들었고 그림은 Mermaid로 그린다. 구성요소를 누르면 깃허브의 실제 파일이나 폴더가 열리고, 결과는 Mermaid 원본을 복사하거나 PNG로 내려받아 가져간다. 비공개 저장소는 브라우저에 토큰을 넣어 처리하고 그 결과는 따로 보관한다. 생성은 기본이 OpenAI, 직접 설치할 때는 OpenRouter도 고를 수 있다.
누구에게 맞나
오픈소스를 처음 뜯어보는 사람, 인수인계로 남의 코드를 떠안은 개발자, 팀에 들어온 지 얼마 안 된 사람.
5분 안에 시작하기
# gitdiagram.com에 저장소 주소를 붙여 넣는다. 또는 보고 있던 깃허브 주소에서 github.com을 gitdiagram.com으로 바꾼다.
주의할 점
그림은 AI가 코드를 읽고 추정한 결과라 실제 구조와 다를 수 있다. 공개 서비스는 사용량 한도를 두고 있고, 직접 설치해 쓰려면 OpenAI나 OpenRouter 키를 따로 넣어야 한다.
