archify로 저장소 구조를 ASCII 트리 대신 눌러 보는 다이어그램으로 받는 법

/archify를 붙이면 다이어그램을 받는다

스킬 없이는 ASCII 트리와 표가 든 답이 터미널에 남고 끝납니다. /archify를 붙이면 .archify/ 폴더에 HTML 한 파일이 생기고, 칸을 누르면 그 칸의 출처 파일과 줄 번호가 뜹니다.

archify는 Claude Code가 저장소를 읽고 그린 다이어그램을 검사한 뒤 HTML 한 파일로 내주는 스킬입니다. 프로젝트 폴더에서 아래 한 줄을 돌리면 .claude/skills/archify에 깔립니다. Node 18 이상과 브라우저 검사에 쓸 Chrome·Chromium·Edge 중 하나가 있어야 합니다.

github.com↗

GitHub - tt-a1i/archify: Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more.

Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more. - tt-a1i/archify

1npx skills add https://github.com/tt-a1i/archify --skill archify --agent claude-code --yes

프로젝트에 깔면 저장소에 .claude/skills/archify(약 18MB)와 skills-lock.json이 생기고, 다이어그램을 만들 때마다 .archify/ 아래에 폴더가 하나씩 쌓입니다. 커밋하지 않으려면 셋을 .gitignore에 넣고, 여러 저장소를 둘러볼 때는 접힌 칸의 --global로 깝니다.

질문 앞에 /archify를 붙여 보냅니다.

1/archify 이 저장소 구조를 한눈에 보이게 설명해 줘

이름을 빼고 같은 문장만 보내면, 스킬을 깔아 둔 폴더에서도 세 번 모두 스킬을 부르지 않고 글로 답합니다.

다이어그램 종류는 Claude가 질문을 보고 고릅니다. "구조"를 물으면 세 번 중 두 번은 위 같은 폴더 트리를, 한 번은 모듈 관계도를 그립니다.

1npx skills add https://github.com/tt-a1i/archify --skill archify --agent claude-code --global --yes
2node ~/.claude/skills/archify/bin/archify.mjs doctor

검사를 통과해야 파일이 바뀐다

HTML 파일은 archify의 finalize 명령이 원본을 검사한 뒤에야 바뀝니다. 원본은 Claude가 먼저 쓰는 candidate.json이라는 JSON 파일이고, 칸·연결과 칸마다 출처 파일·줄이 들어 있습니다. Claude는 원본에 저장소 커밋 하나를 고정해 적고, 출처 줄 번호는 그 커밋의 파일에서 셉니다.

모듈 관계도를 그린 한 번은 router 칸이 lib/ 테두리 안에 들어가 첫 검사에서 떨어졌습니다. Claude는 테두리를 빼고 다시 돌려 통과했고, 뺀 것을 답 끝에 적었습니다. 고치다 뺀 것이 있는지는 답 끝 몇 줄에서 봅니다.

검사는 출처 줄이 고정한 커밋에 있는지까지만 보고, 칸 설명이 그 줄 내용과 맞는지는 보지 않습니다. 위 트리의 application.js 칸은 설명에 set·render를 적었지만, 출처 줄 셋 중 어느 것도 그 두 함수를 가리키지 않습니다. 근거로 쓸 칸은 눌러서 출처 줄을 열어 봅니다.

1"gates": {
2  "validate": "fail",
3  "deliver": "not-run",
4  "check": "not-run",
5  "browser-check": "not-run"
6},
7"diagnostics": [{
8  "code": "layout/boundary-encloses-non-member",
9  "subject": { "component": "router" },
10  "supportedFixes": ["move \"router\" outside the boundary frame"]
11}]

요청 흐름은 질문에 적어 받는다

요청이 지나는 길을 보려면 질문에 그 흐름을 적습니다. 시퀀스 다이어그램은 참여자를 세로줄로 세우고, 주고받는 호출을 위에서 아래로 그린 그림입니다. 아래 질문에 Claude는 이 그림을 골랐습니다.

1/archify GET 요청 하나가 app.get으로 등록한 핸들러까지 가는 흐름을 그려 줘

다이어그램은 등록, 요청 진입, 매칭·디스패치, 일치 없음·오류의 네 구간으로 나뉩니다. 마지막 구간은 경로가 맞지 않거나 핸들러가 next(err)를 부를 때 finalhandler가 404나 500을 보내는 길입니다.

출처는 고정한 커밋에 든 파일만 달 수 있습니다. Express가 의존하는 router 패키지는 이 저장소에 없어서, 이번 다이어그램의 매칭·디스패치 구간에는 Express가 router를 부르는 줄이 출처로 붙었습니다. 그 구간의 동작을 근거로 쓰려면 router 저장소의 코드를 따로 열어 봅니다.

큰 저장소는 질문에 폴더 하나나 흐름 하나처럼 범위를 적습니다. archify 규칙대로 Claude는 저장소 전체를 훑지 않고 질문에 닿는 코드만 이어 읽습니다.