Archify로 아키텍처 다이어그램을 만드는 방법: 설치부터 HTML 시스템 맵 확인까지 | DAKER 커뮤니티

아키텍처 다이어그램이 필요할 때마다 손으로 상자를 그리고 선을 잇는 일은 생각보다 시간이 많이 듭니다. 특히 발표용으로 빠르게 구조를 보여 주고 싶을 때는, 다이어그램 툴을 따로 열지 않고도 결과를 확인할 수 있는 흐름이 더 반갑게 느껴집니다.

채널 TechyTacos는 GitHub에서 주목받는 에이전트 스킬 Archify(영상·저장소 표기 ArchifAI/Archify)를 약 7분 동안 시연하며, 평문 요구사항이나 코드베이스를 바탕으로 인터랙티브 HTML 시스템 맵을 만드는 과정을 보여 줍니다. MCP 서버나 별도 다이어그램 툴 없이 진행된다는 점이 이 영상의 핵심입니다.

영상 보기: https://www.youtube.com/watch?v=YZPXdO2zT3w

Archify가 보여 주는 가능성

영상에서는 Archify가 코드베이스를 읽어 아키텍처 다이어그램을 만들 수 있고, 코드가 없어도 영어 등 평문 설명만으로 결과물을 생성할 수 있다고 소개합니다. 결과물은 정적인 이미지가 아니라 단계 사이를 오가며 살펴볼 수 있는 인터랙티브 맵입니다.

평문 요구사항이나 코드베이스만으로 인터랙티브 HTML 시스템 맵을 만들 수 있다는 점이 Archify의 출발점입니다.

또한 Cursor, Claude Code, Codex, GitHub Copilot처럼 스킬 폴더를 지원하는 에이전트에서 활용할 수 있다고 설명합니다. 공식 저장소는 https://github.com/tt-a1i/archify이며, 영상에서는 GitHub 트렌딩과 Repository of the Day 같은 언급도 함께 나옵니다.

설치와 호출은 어떻게 진행되나

데모에서는 저장소에 안내된 설치 명령을 터미널에 붙여 넣어 로컬에 스킬을 설치합니다. 기본 위치는 .agents/skills 쪽이라고 설명합니다.

다만 Claude Code만 사용할 때는 .claude/skills에 스킬이 있어야 검색되므로, 자동 설치가 되지 않으면 .agents/skills/archify를 복사해 넣는 우회 방법도 함께 보여 줍니다. 설치가 끝난 뒤에는 채팅에서 Archify 또는 ArchifAI를 검색해 스킬을 호출하는 흐름입니다.

영상의 설치 포인트는 스킬을 로컬 폴더에 두고, 에이전트가 그 위치를 인식하게 만드는 데 있습니다.

첫 다이어그램은 이렇게 만들어집니다

데모 프롬프트 예시는 LLM이 내부적으로 어떻게 동작하는지 아키텍처 다이어그램을 만들어 달라는 요청입니다. 영상에서는 약 4분 뒤 HTML 결과물이 생성되고, 이를 탐색기에서 열어 확인합니다.

이 과정에서 강조되는 점은 결과가 단순한 그림 파일이 아니라는 점입니다. HTML로 열리는 시스템 맵은 발표나 설명에 맞게 탐색하면서 볼 수 있도록 구성됩니다.

HTML 시스템 맵에서 확인할 수 있는 UI

상단에는 라이트·다크 테마 전환, single flow·classic·blueprint·editorial 같은 스타일 선택, 프레젠테이션 모드, 보내기 형식 같은 항목이 배치됩니다.

하단과 부가 기능으로는 줌, 시작 노드에서 목적지까지를 강조하는 path, map 포커스, 그리고 legend를 바탕으로 backend·database·external 등을 강조하는 lens가 소개됩니다. 특정 박스를 선택하면 관련 화살표만 남기고 나머지를 흐리게 처리하는 방식도 보여 줍니다.

결과물의 강점은 다이어그램을 한 장 보여 주는 데서 끝나지 않고, 필요한 요소만 골라 설명할 수 있다는 데 있습니다.

영상에서는 갤러리와 챕터 재생 기능도 언급합니다. 또한 choose the right diagram 레시피를 통해 상황 설명을 입력하면 추천 프롬프트를 복사해 에이전트에 다시 넣는 방법도 안내합니다. 저장소 기준으로는 architecture, workflow, sequence, data lifecycle 등의 다이어그램 종류가 언급되며, 영상에서는 다섯 종류라고 말합니다.

이 영상이 보여 주는 가장 실용적인 지점

이 데모가 흥미로운 이유는 복잡한 설정을 길게 설명하기보다, 스킬을 설치한 뒤 짧은 평문 프롬프트 하나로 결과를 바로 확인하는 흐름을 보여 주기 때문입니다. 손그림이나 별도 MCP 구성 없이도 발표용 시스템 맵이 나오는지 빠르게 판단해 볼 수 있습니다.

아키텍처를 자주 설명해야 하는 개발자나, 코드베이스를 시각적으로 정리해 보고 싶은 팀이라면 이 영상의 흐름이 꽤 실용적인 출발점이 될 수 있습니다.

참고 자료

제목: How to Create Architecture Diagrams with GitHub's Top Trending Agent Skill (Archify) !
채널: TechyTacos (@TechyTacos)
유튜브: https://www.youtube.com/watch?v=YZPXdO2zT3w
공식 저장소: https://github.com/tt-a1i/archify

이런 방식의 HTML 아키텍처 맵이 실제 문서화나 발표 준비에 얼마나 도움이 될지, 어떻게 보셨나요?