코드 다이어그램
ProjectHub는 프로젝트의 코드를 자동으로 분석하여 시각적인 다이어그램으로 변환합니다. 외부 도구 없이 코드 구조를 한눈에 파악할 수 있습니다.
개요
세 가지 다이어그램을 지원하며, 각각 별도의 탭으로 제공됩니다:
| 다이어그램 | 탭 이름 | 용도 |
|---|---|---|
| 플로우 차트 | Flow | 함수 호출 흐름 시각화 |
| 클래스 다이어그램 | Class | OOP 구조 (클래스, 상속) 시각화 |
| SQL 다이어그램 | SQL | 데이터베이스 스키마 시각화 |
💡 다이어그램은 순수 HTML/CSS/JavaScript로 렌더링되며, 외부 의존성이 필요 없습니다.
지원 언어
| 언어 | Flow | Class | SQL |
|---|---|---|---|
| Swift | ✅ | ✅ | - |
| Python | ✅ | ✅ | ✅ |
| JavaScript/TypeScript | ✅ | ✅ | ✅ |
| Java | ✅ | ✅ | ✅ |
| Kotlin | ✅ | ✅ | - |
| Rust | ✅ | ✅ | - |
| Go | ✅ | ✅ | - |
| C# | ✅ | ✅ | ✅ |
| C/C++ | ✅ | ✅ | - |
| Ruby | ✅ | ✅ | ✅ |
| PHP | ✅ | ✅ | ✅ |
플로우 차트 (Flow)
프로젝트 내 함수들의 호출 관계를 시각화합니다.
분석 내용
- 함수/메서드 정의 추출
- 함수 간 호출 관계 파악
- 진입점(main, entry point) 식별
- 호출 깊이에 따른 레이어링
읽는 방법
- 노드 — 각 함수/메서드
- 화살표 — 호출 관계 (A → B: A가 B를 호출)
- 색상 — 파일별로 다른 색상 구분
- 클릭 — 노드를 클릭하면 상세 정보 표시
클래스 다이어그램 (Class)
OOP(객체지향) 구조를 UML 스타일로 시각화합니다.
분석 내용
| 요소 | 설명 |
|---|---|
| 클래스 | class 키워드 기반 추출 |
| 구조체 | struct 키워드 기반 추출 |
| 열거형 | enum 키워드 기반 추출 |
| 프로토콜/인터페이스 | protocol, interface 추출 |
| 프로퍼티 | 인스턴스 변수, 속성 |
| 메서드 | 인스턴스 메서드, 정적 메서드 |
| 상속 | 부모-자식 관계 |
읽는 방법
- 상자 — 각 클래스/구조체
- 상단 — 클래스 이름
- 중단 — 프로퍼티 목록
- 하단 — 메서드 목록
- 실선 화살표 — 상속 관계
- 점선 화살표 — 인터페이스 구현
SQL 다이어그램 (SQL)
데이터베이스 스키마를 ER 다이어그램으로 시각화합니다.
분석 내용
- 테이블 정의 추출 (CREATE TABLE, 모델 클래스)
- 컬럼명, 데이터 타입
- Primary Key, Foreign Key 관계
- 인덱스
읽는 방법
- 테이블 상자 — 각 테이블
- 컬럼 목록 — 이름, 타입, 제약조건
- 연결선 — Foreign Key 관계
- 1:N 표시 — 관계 카디널리티
사용 방법
1. 다이어그램 탭 선택
프로젝트 상세 뷰에서 Flow, Class, 또는 SQL 탭을 클릭합니다.
2. 자동 분석
탭을 선택하면 자동으로 프로젝트 코드를 분석합니다:
- 프로젝트 파일 스캔
- 해당 언어 파서로 구조 추출
- HTML 다이어그램 생성
- WebView로 렌더링
3. 인터랙션
생성된 다이어그램에서 다음 인터랙션이 가능합니다:
- 줌 — 스크롤로 확대/축소
- 팬 — 드래그로 이동
- 클릭 — 노드 선택 및 상세 정보
- 호버 — 요소에 마우스를 올리면 하이라이트
성능 제한
대규모 프로젝트에서의 성능을 위해 다음 제한이 있습니다:
| 항목 | 제한 |
|---|---|
| 파일당 최대 라인 수 | 5,000줄 |
| 파일 크기 제한 | 500KB |
| 제외 디렉토리 | node_modules, .git, build, __pycache__, dist |
💡 매우 큰 프로젝트는 분석에 시간이 걸릴 수 있습니다. 제외 디렉토리 설정으로 불필요한 파일을 건너뛸 수 있습니다.
활용 시나리오
코드 이해
새로 합류한 프로젝트의 전체 구조를 빠르게 파악할 때 유용합니다.
리팩토링 계획
클래스 다이어그램으로 의존성을 파악하고, 리팩토링 전략을 세울 수 있습니다.
데이터베이스 설계 검토
SQL 다이어그램으로 테이블 관계를 시각화하여 설계를 검토합니다.
문서화
생성된 다이어그램을 프로젝트 문서에 포함하여 코드 구조를 설명할 수 있습니다.