tt-a1i/archify

이해하고, 계획하고, 공유할 내용을 인터랙티브한 시각 자료로 만드세요.

아이디어, 질문, 계획을 AI 에이전트에게 설명하면 Archify가 탐색하고 수정하고 공유할 수 있는 인터랙티브 HTML을 만듭니다. 여행 일정과 학습 지도부터 복잡한 시스템까지 원하는 형태로 발전시킬 수 있습니다.

라이브 데모  ·  시작하기  ·  시나리오 가이드  ·  커뮤니티  ·  English  ·  简体中文  ·  日本語

Archify 살펴보기

https://github.com/user-attachments/assets/78570807-ba1d-4737-953f-55504a378a87

한 문장으로 저장소를 지도처럼 파악하세요. 인터랙티브 예제 보기 ↗

설치한 뒤 아이디어 설명하기

Cursor, Claude Code, Codex CLI, OpenCode에서 사용할 수 있습니다.

Install Archify for me by reading https://raw.githubusercontent.com/tt-a1i/archify/main/llms.txt

에이전트에게 다음과 같이 요청하세요.

Archify로 웹 요청을 다이어그램으로 그려 줘. 브라우저가 API를 호출하고,
API는 Redis를 확인해. 캐시 미스면 PostgreSQL을 조회하고 캐시를 채워 줘.

그다음 “인증 추가해 줘”, “캐시 미스 경로를 강조해 줘”, “라이트 테마로 바꿔 줘”처럼 이어서 다듬을 수 있습니다. 저장소 없이 설명만으로 시작할 수도 있고, 코드 근거가 필요하면 에이전트에게 저장소를 분석하게 할 수도 있습니다.

이 저장소를 분석한 뒤 Archify로 높은 수준의 런타임 아키텍처 다이어그램을 만들어 줘.
핵심 구성 요소 8~12개, 주요 경로, 외부 의존성, 신뢰 경계를 보여 줘.
연결선을 더 늘리는 대신 보조 세부 정보는 카드에 넣어 줘.

에이전트 선택하기 · 설치와 업데이트 확인 상세

질문하면 한 페이지로 답합니다

모든 답이 다이어그램 한 장은 아닙니다. 에이전트에게 한 페이지로 답해 달라고 하면 Archify가 explainer를 만듭니다. 결론을 먼저 보여 주고, 질문마다 패널을 나누어 표, 단계, 차트, 코드, 검증된 다이어그램으로 이유를 설명합니다.

• 결론 먼저. 답과 이유가 앞에 오고, 패널마다 질문 하나에 답합니다.
• 글과 그림이 함께 설명합니다. 단계는 설명하는 다이어그램 옆에 놓이고, 읽는 단계에 맞춰 해당 부분이 강조됩니다. 노드를 클릭하면 전체 인터랙티브 뷰가 열립니다.
• 확인할 수 있습니다. 주장에는 번호가 붙은 출처가 있고, 저장소 발췌는 특정 커밋에 고정되어 소스 카드로 열립니다.
• 공유하기 쉽습니다. HTML 파일 하나에 네 가지 스타일과 라이트·다크 테마가 들어 있습니다. PNG, WebP, JPG 긴 이미지나 PDF로 내보낼 수 있고, 어느 패널이든 후속 질문을 만들어 에이전트가 그 패널만 고치게 할 수 있습니다.

Archify로 한 페이지로 답해 줘: API P99가 80 ms에서 600 ms로 올랐는데
평균은 거의 그대로야. 원인은 무엇이고 어떻게 조사해야 해?

라이브 예시: 처음 HTTPS 접속(영어) · P99 지연(중국어) · 저장소에서 읽은 Archify finalize(중국어) · 첫 임대 체크리스트(중국어)

무엇을 보여줄 수 있나요?

에이전트 워크플로 설명	캐시 미스 추적	서비스 관계 탐색
한 단계 이후의 흐름을 모두 따라갑니다.	웹 앱부터 데이터베이스까지의 경로를 강조합니다.	작성된 백엔드와 데이터베이스 연결에 집중합니다.

Proof Lab에는 저장소에 포함된 시나리오와 JSON 소스, 검증 결과가 있습니다.

빠른 시작

현재 안정 버전: v3.2.0. 변경 이력을 확인하세요.

1. 설치

Install Archify for me by reading https://raw.githubusercontent.com/tt-a1i/archify/main/llms.txt

npx -y skills@latest add https://archify.si --skill archify --agent cursor --global --copy --yes

npx skills use tt-a1i/archify@archify --agent codex

2. 설명으로 시작하기 — 저장소는 필요하지 않습니다

Archify로 그려 줘: Browser -> API -> Redis cache -> PostgreSQL fallback.

3. 대화로 다듬기

Redis 추가, 인증을 왼쪽으로 이동, 롤백 경로 강조처럼 구체적인 요청을 이어 가세요. Archify는 선택적 수정을 위해 typed source를 유지합니다.

적합한 다이어그램 고르기

어떤 유형이 맞는지 모르겠다면 인터랙티브 시나리오 가이드를 보거나 CLI에 물어보세요.

node archify/bin/archify.mjs guide "Show an API request with Redis cache miss"
node archify/bin/archify.mjs guide "Kafka 토픽, 컨슈머 그룹, 재처리, DLQ를 지도처럼 보여 줘" --json

Archify를 선택하는 이유

• 렌더러 기반 모드마다 재현 가능한 typed JSON IR이 있습니다.
• 스키마, 레이아웃, HTML/SVG, 경로와 라벨 여유 공간 검증을 모두 통과해야 결과물을 교체합니다.
• validate --json과 deliver --json은 규칙 코드, 대상, 측정 근거, 지원되는 수정 방법을 반환합니다.
• 결과물은 기본적으로 하나의 HTML 파일입니다.

동작 방식

cd archify
node bin/archify.mjs doctor
node bin/archify.mjs demo /tmp/archify-demo
node bin/archify.mjs guide "CI/CD 검사, 승인, 배포, 롤백을 보여 줘"
node bin/archify.mjs validate workflow examples/agent-tool-call.workflow.json --quality showcase --json

결과 탐색과 공유

안정적인 링크로 #focus=<id>, #focus=<id>&reach=upstream|downstream, #relation=<id>, #route=<source>~<target>, #lens=<kind>~<kind> 상태를 복원할 수 있습니다.

설치 옵션

참고 자료와 범위

• 스키마 참고 · Skill과 렌더러 계약 · 예제 · Agent 작성 가이드
• 변경 이력 · 로드맵 · 생성된 Proof Lab

자동 Mermaid 파싱, 범용 자동 레이아웃, 호스팅 공유, WYSIWYG 편집기는 현재 범위에 포함되지 않습니다.

커뮤니티

다른 사용자 및 개발자와 소통하고, 아이디어와 기능 요청을 공유하고, 버그를 보고하며 Archify를 함께 개선해 보세요.

• Discord
• WeChat: QR 코드는 주기적으로 만료될 수 있으며, 만료 시 Discord 또는 QQ로 최신 코드를 요청할 수 있습니다.
• QQ 그룹: 1121948602

라이선스

Apache-2.0 — 자유롭게 사용, 수정, 배포할 수 있습니다.

기존 MIT 허가는 계속 유효합니다. NOTICE와 LICENSE-MIT를 참조하세요. 타사 구성 요소는 각자의 라이선스를 유지합니다. 소프트웨어 라이선스는 사용자가 작성한 콘텐츠의 소유권을 변경하거나 Archify 상표의 일반적인 사용 권한을 부여하지 않습니다.

기여하기

Issue, Pull Request, 실제 사용 사례 다이어그램을 환영합니다. 기여 가이드에서 시작하세요. 실패는 재현 가능한 버그 양식으로 제보하고, 검증된 다이어그램은 커뮤니티 Showcase 양식으로 제출할 수 있습니다.

기여자

Archify를 함께 만들어 준 모든 분께 감사합니다. 팔로우해 보세요. ❤️

Star History