VSCode CodeVisualizer 아키텍쳐와 함수 흐름 시각화 확장 프로그램
VS Code 확장 개요
CodeVisualizer라는 VS Code 확장임.
코드 흐름·모듈 의존성을 다이어그램으로 시각화함.
새 코드베이스 구조 파악·복잡한 로직 디버깅·아키텍처 문서화에 쓰도록 설계됨.
수동 다이어그램 그리는 시간 줄이고, 구조를 한눈에 보게 해줌.
핵심 기능 – 함수 플로우차트
함수 단위로 제어 흐름 플로우차트 자동 생성함.
조건문·반복문·예외 처리·비동기 흐름까지 다이어그램에 포함됨.
노드 클릭하면 해당 소스 코드 위치로 바로 이동 가능함.
사이드바/별도 패널 등 여러 뷰 모드 지원함.
여러 가지 테마 제공해서 플로우차트 스타일 바꿀 수 있음.
코드 수정 시 플로우차트 자동으로 갱신됨.
핵심 기능 – 코드베이스 의존성 그래프
프로젝트 전체 파일 의존성을 그래프로 보여줌.
파일 간 import/require 관계를 노드·엣지로 표현함.
Core/Report/Config/Tool/Entry 등 카테고리로 색상 구분함.
큰 그래프도 줌/팬으로 탐색하기 편하게 최적화돼 있음.
AI 라벨링 기능
플로우차트 노드 라벨을 사람이 읽기 쉬운 텍스트로 바꿔 줌.
OpenAI, Gemini, Groq, Ollama, Anthropic 등 다양한 LLM 연동 지원함.
라벨 캐시 사용해서 같은 내용은 재사용함 → API 호출 줄어듦.
라벨 스타일·사용 언어를 설정할 수 있어 팀 상황에 맞게 조정 가능함.
지원 언어
함수 플로우차트: Python, TS/JS, Java, C, C++, Rust, Go 지원함.
코드베이스 의존성 그래프: 현재 TS/JS, Python 지원함.
Java, C, C++, Rust, Go 의존성 분석은 이후 추가 예정임.
동작 방식(요약)
Tree-sitter로 AST 만들고 → 제어 흐름 분석 → 중간 표현 만들고 → Mermaid 문법으로 바꿔서 다이어그램 렌더링함.
코드베이스 의존성은 파일 검색 → 의존 구문 파싱 → 실제 경로 매핑 → 그래프 생성 → Mermaid로 시각화함.
AI 라벨은 노드 텍스트 추출 → 캐시 확인 → LLM 호출 → 라벨 갱신 → 캐시에 저장하는 흐름임.
설치·사용 방법 (요약)
VS Code 1.105.0 이상 필요함.
Python/TS/JS/Java/C/C++/Rust/Go 중 하나 이상이 있는 워크스페이스에서 쓰면 효율적임.
마켓플레이스에서 CodeVisualizer 검색 후 설치 가능함.
https://marketplace.visualstudio.com/items?itemName=DucPhamNgoc.codevisualizer
함수 플로우차트: 지원 언어 파일 열고 우클릭 → CodeVisualizer 플로우차트 명령 선택함.
코드베이스 의존성: Explorer에서 폴더 우클릭 → 코드베이스 시각화 명령 선택함.
프라이버시·보안
코드 파싱·분석은 전부 로컬에서만 수행됨.
플로우차트 생성 과정에서 코드가 외부로 전송되지 않음.
AI 라벨 켰을 때만, 짧은 노드 텍스트만 선택한 LLM 제공자에게 전송됨.
API 키는 VS Code Secret Storage에 암호화해 저장됨.
Ollama 사용 시 완전 로컬 LLM로 처리 가능함.
오픈소스·라이선스
GitHub에서 개발 중인 오픈소스 프로젝트임.
https://github.com/DucPhamNgoc08/CodeVisualizer
이슈·기능 제안·PR 등 기여 환영함.
MIT 라이선스로 배포됨.
