깃허브 7.1만 스타 '아키텍처 자동 생성기', AI 에이전트에 붙여 쓰는 법

깃허브에서 7만 1천 스타를 받은 Archify는 코드나 자연어 설명만 던지면 아키텍처·시퀀스·데이터플로 등 5가지 다이어그램을 부드러운 모션이 적용된 인터랙티브 HTML로 만들어줍니다. 다크/라이트 테마 전환, 브랜드 마크 삽입, PNG·SVG·WebM·공유카드(1200×630) 일괄 내보내기까지 지원해 문서화와 프레젠테이션을 한 번에 해결합니다.

Archify, 무엇인가요

Archify는 AI 에이전트와 함께 사용할 수 있는 아키텍처 자동 생성기예요. 코드나 시스템 설명을 입력하면 아키텍처·워크플로·시퀀스·데이터‑플로·라이프사이클 등 5가지 다이어그램을 한 장의 인터랙티브 HTML 파일로 만들어 줍니다. 이 HTML은 다크·라이트 테마 전환, 브랜드 마크 삽입, 부드러운 모션을 기본으로 제공하고, PNG·SVG·WebM·공유카드(1200×630) 등 다양한 포맷으로 한 번에 내보낼 수 있어요.

Archify는 JavaScript 기반이며, MIT 라이선스로 자유롭게 사용할 수 있습니다. 현재 스타 수는 71,053개, 포크 수는 4,774개이고, 최근 업데이트는 이번 달(2026년 9월)이에요. 처음 만들어진 시점은 5개월 전(2026년 4월)이며, Node.js 환경만 있으면 바로 실행할 수 있습니다.

지원하는 다이어그램 종류

이 도구는 Cursor, Claude Code, Codex CLI, OpenCode와 같은 AI 개발 환경에 플러그인 형태로 연결할 수 있어요. 플러그인을 설치하면 에이전트에게 ‘인증 추가해 주세요’ 혹은 ‘라이트 테마로 바꿔 주세요’ 같은 명령을 이어서 전달해도 즉시 반영됩니다. 별도의 레포지토리를 요구하지 않으며, 설명만으로도 인터랙티브 다이어그램을 바로 생성할 수 있습니다.

• PNG·SVG·WebM·공유카드(1200×630) 내보내기 지원
• Node.js 환경만 필요
• Cursor·Claude Code·Codex CLI·OpenCode와 플러그인 연동 가능

⭐ 71,053개의 스타와 4,774개의 포크를 가진 Archify는 현재 GitHub에서 tt-a1i/archify 저장소로 확인할 수 있습니다. 개발자 도구, 다이어그램‑아즈‑코드, 코드‑비주얼라이제이션 등 다양한 주제 태그와 함께 활발히 사용되고 있답니다.

왜 쓰나요: 기존 도구와 다른 점

Archify는 저장소가 없어도 바로 사용할 수 있어요. 시스템이나 코드를 설명하는 문장을 AI 에이전트에 입력하면, Archify가 자동으로 인터랙티브 HTML을 생성해 줍니다. 별도로 레포지토리를 클론하거나 빌드할 필요 없이, “사용자 로그인 흐름을 그려줘” 같은 자연어만 입력하면 다이어그램이 완성됩니다. 또한, 필요에 따라 에이전트에게 레포지토리를 읽게 해서 소스 기반 아키텍처를 만들 수도 있어요.

이 도구는 Cursor, Claude Code, Codex CLI, OpenCode 등 주요 AI 에이전트와 네이티브 연동이 지원돼요. 에이전트에게 프롬프트를 보내면 즉시 다이어그램이 반환되고, “라이트 테마로 바꿔”, “인증 흐름을 강조해” 같은 추가 지시도 바로 적용됩니다. 시각적으로는 다크·라이트 테마, 브랜드 마크, 부드러운 모션을 포함하고, PNG·SVG·WebM·공유 카드(1200×630)까지 원클릭으로 내보낼 수 있어요. 이렇게 완성도 높은 시각 자료를 손쉽게 만들 수 있는 점이 기존 도구와 큰 차이점이죠.

• 저장소 불필요 – 설명만으로 다이어그램 생성
• 자연어 입력 – AI에게 문장 그대로 전달
• 에이전트 네이티브 연동 – Cursor·Claude·Codex·OpenCode 지원
• 시각적 완성도 – 모션·다크·라이트·다양한 내보내기

지원 환경과 설치·준비물

Archify는 Cursor, Claude Code, Codex CLI, OpenCode와 바로 연동돼요. 각각의 에이전트에게 Archify를 호출하도록 한 줄을 보내면, 시스템·코드 설명을 입력해 인터랙티브 HTML 다이어그램을 만들 수 있습니다. 저장소가 없어도 동작하니 바로 시작할 수 있어요.

추가로 Raven, Kimi Work, Supercode에서도 사용할 수 있고, 웹 페이지의 시나리오 가이드와 프루프 랩에서도 별도 설치 없이 체험할 수 있습니다. 각 환경별 진입 방법을 아래 표에 정리했으니, 원하는 곳에 바로 연결해 보세요.

unzip archify.zip -d ~/.raven/workspace/skills

첫 다이어그램 만드는 3단계 실습

먼저 Archify를 사용하려면 Cursor, Claude Code, Codex CLI, OpenCode 중 하나와 연동합니다. 연동 방법은 unzip archify.zip -d ~/.raven/workspace/skills 명령으로 ZIP 파일을 풀어 ~/.raven/workspace/skills에 넣으면 됩니다. 준비가 끝났다면 AI 에이전트에게 “사용자 인증이 필요한 결제 서비스 흐름을 시각화해 주세요”와 같이 한 문장으로 아이디어를 전달합니다. 그러면 Archify가 자동으로 5가지 유형 중 하나인 아키텍처 다이어그램을 포함한 인터랙티브 HTML을 생성해 반환합니다.

생성된 HTML을 확인한 뒤, 추가적인 수정 지시를 보냅니다. 예를 들어 “인증 절차에 토큰 검증을 표시해 주세요”, “캐시 미스 경로를 강조해 주세요”, “다크 테마 대신 라이트 테마로 바꿔 주세요”와 같이 명령하면 Archify가 즉시 HTML을 업데이트합니다. 최종 HTML을 브라우저에서 열면 움직이는 모션과 함께 다이어그램을 탐색할 수 있고, PNG·SVG·WebM·공유 카드 등 다양한 포맷으로 한 번에 내보낼 수 있습니다.

unzip archify.zip -d ~/.raven/workspace/skills

1. 1. 프롬프트 전송

   AI 에이전트에게 시스템·코드 설명을 한 문장으로 전달합니다.

2. 2. 수정 지시

   “인증 추가”, “경로 하이라이트”, “테마 전환” 등 원하는 수정 명령을 추가합니다.

3. 3. HTML 열람

   업데이트된 인터랙티브 HTML을 브라우저에서 열어 다이어그램을 확인하고 내보냅니다.

한눈에 보기: 내보내기·공유·커스터마이징

Archify가 만든 결과물은 인터랙티브 HTML 한 장으로 제공돼요. 이 파일 하나로 PNG·SVG·WebM·공유카드(1200×630)까지 한 번에 내보낼 수 있고, 브랜드 마크·다크모드·부드러운 모션 같은 꾸미기 옵션도 바로 적용됩니다. 별도 뷰어 없이 브라우저에서 바로 열어보고 공유할 수 있어서 협업이나 문서화에 바로 쓰기 좋습니다.

1. 내보내기 메뉴 열기

   생성된 HTML 오른쪽 상단 ‘Export’ 버튼을 누르세요.

2. 포맷 선택

   PNG·SVG·WebM·공유카드 중 원하는 형식을 고르세요.

3. 옵션 적용

   다크/라이트 테마, 브랜드 마크, 모션 온·오프를 켜고 ‘Download’를 누르면 파일 저장 완료.

이렇게 내보낸 파일은 버전 관리 저장소에 커밋하거나, 노션·슬랙·피그마 같은 협업 도구에 바로 붙여넣기만 하면 돼요. 별도 라이선스 걱정 없이 MIT 라이선스 범위 안에서 자유롭게 쓸 수 있습니다.

주의할 점과 업데이트 체크

Archify를 쓰려면 Node.js 런타임이 설치돼 있어야 해요. 에이전트마다 설정 파일을 두는 위치가 다르니 아래 표를 참고해 경로를 맞춰 주세요.

라이선스는 MIT라 상업·비상업 구분 없이 자유롭게 쓸 수 있어요. 단, 원저작자 표시와 라이선스 전문만 유지하면 됩니다.

1. 최신 버전 확인

   GitHub 저장소(tt-a1i/archify)의 Releases 페이지에서 태그·날짜·변경 내역을 확인하세요. 오늘 기준 최신 업데이트는 이번 달(2026년 9월)입니다.

2. 자동 업데이트 알림

   gh release list --repo tt-a1i/archify --limit 1 명령으로 최신 태그를 조회하거나, 저장소 Watch → Releases 설정을 켜두면 푸시 알림을 받을 수 있어요.

3. 수동 갱신

   새 버전이 나오면 기존 스킬 폴더를 지우고 다시 압축을 풀어 덮어쓰면 됩니다. unzip -o archify.zip -d <에이전트_경로> 한 줄이면 끝납니다.

• 원문 보기