Archify - 코드와 설명을 탐색 가능한 시스템 다이어그램으로 만드는 에이전트 스킬

1 day ago 10

코드베이스를 분석하거나 시스템을 말로 설명하면, 구성 요소와 연결 관계를 직접 탐색할 수 있는 다이어그램을 생성
Cursor/Claude Code/Codex CLI/OpenCode에서 사용하며, 저장소 없이 자연어 설명만으로도 시작 가능
아키텍처/워크플로/시퀀스/데이터 흐름/생명주기 등 다섯 가지 다이어그램 유형 지원
에이전트가 구조화된 JSON을 작성하면 Node.js 렌더러가 HTML/SVG로 변환하는 방식으로, 원본 JSON을 수정하며 대화로 결과를 다듬을 수 있음
생성 과정에서 데이터 구조, 배치, 연결선과 글자 간 간격을 검사하고, 오류가 있으면 수정할 위치와 원인을 반환
노드를 검색하고 앞뒤 연결 관계나 두 요소 사이의 경로를 따라가며, 단계별 설명과 발표 모드로 시스템 동작을 보여줄 수 있음
변경 전후 다이어그램을 비교해 추가/삭제/수정된 요소와 위치 이동, 연결 경로 변경을 표시
요청하면 노드에 특정 Git 커밋의 소스 파일과 코드 위치를 연결해 설명의 근거를 확인 가능
결과는 단일 HTML 파일로 만들어지고, PNG/SVG/WebM과 소셜 공유용 이미지로 내보내기 지원
npx skills add tt-a1i/archify -g로 설치
MIT 라이선스