LLM Wiki

Archify

Properties3
description평문 설명에서 검증 가능한 대화형 아키텍처·워크플로우·시퀀스·데이터흐름·라이프사이클 다이어그램을 자체 완결 HTML로 생성하는 에이전트 스킬 (tt-a1i/archify, MIT, JavaScript).
tagsdev-tools, open-source, diagrams, agent-skills, software-architecture
aliases아키파이, archify, tt-a1i/archify

8 min read

개요

Archify(tt-a1i/archify)는 평문 설명으로부터 검증 가능한 대화형 기술 다이어그램을 생성하는 오픈소스 에이전트 스킬이다.^[https://tt-a1i.github.io/archify/] Cursor, Claude Code, Codex CLI, OpenCode에서 사용할 수 있으며, 시스템 설명을 입력하면 브라우저에서 바로 열어볼 수 있는 자체 완결 HTML 파일을 출력한다.^[https://tt-a1i.github.io/archify/]

아키텍처, 워크플로우, 시퀀스, 데이터 흐름, 상태 머신(라이프사이클) 등 5가지 다이어그램 유형을 지원하며, MAP → READ → FULL로 진행되는 점진적 상세도, 의미론적 색상 체계, 어두운/밝은 테마, 선택적 모션, PNG·SVG·WebM 등 다양한 export를 제공한다.^[https://tt-a1i.github.io/archify/]

핵심 설계 원칙은 “truth before spectacle”(모든 포커스·경로·스토리·소스 링크가 authored 또는 검증된 증거에서 도출)과 “one spatial narrative first”(주요 경로를 먼저 읽기 쉽게 만든 후 보조 관계 공개)다.^[https://github.com/tt-a1i/archify/blob/main/PRODUCT.md]

저장소 메타

항목값
전체 이름tt-a1i/archify
GitHubhttps://github.com/tt-a1i/archify
설명Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams—self-contained HTML with motion and crisp export.
별점67,400
포크4,506
기본 브랜치main
주 언어JavaScript
라이선스MIT
생성일2026-04-15
마지막 업데이트2026-09-19
이슈140 open
위키있음
GitHub Pages있음
크기약 250MB
개발 버전v2.17.0-dev.1
홈페이지https://tt-a1i.github.io/archify/

Topics (20개)

architecture-diagram, claude-skill, developer-tools, diagram-as-code, mermaid-alternative, system-design, agent-skills, codex, data-flow-diagram, opencode, sequence-diagram, deepseek-harness, dsh-plugin, architecture-as-code, code-visualization, coding-agents, diagrams, diagrams-as-code, software-architecture, text-to-diagram

5가지 다이어그램 유형

유형용도
Architecture시스템 구성요소, 클라우드 리소스, 데이터베이스, 캐시, 서비스, 보안 그룹, 연결 관계 (AWS/GCP/Azure, 마이크로서비스, 보안 경계, 네트워크)
Workflow프로세스, 승인 게이트, 도구 호출, 런북, CI/CD 파이프라인
SequenceAPI 호출 체인, 요청 라이프사이클, 비동기 추적, 리턴 흐름
Dataflow파이프라인, ETL/ELT, 데이터 계보(lineage), 거버넌스, 소비자
Lifecycle상태 머신, 객체 라이프사이클, 실행/주문/배포 상태 전이 (대기·재시도·취소·터미널 결과)

^[https://tt-a1i.github.io/archify/]

핵심 기능

  • Progressive detail: MAP → READ → FULL 3단계 상세도
  • Semantic color language: 인프라용 의미론적 색상 체계
  • 4가지 시각 프리셋 + 어두운/밝은 테마 + 선택적 모션
  • Zero dependency 단일 HTML: 서버·런타임 불필요
  • Export: PNG, JPEG, WebP, SVG, WebM + 1200×630 공유 카드
  • 대화형 뷰어: 의미론적 카메라, 경로 인식 스토리, 가이드 뷰, 검색·초점·관계 추적·의미론적 뷰, 프레젠테이션 스테이지, 딥 링크, Share Cards / Route·Reach Cards
  • 키보드 단축키: ? 가이드, T 테마, / 검색, R 경로 추적, M 의미론적 레이더, L 종류 비교, F 프레젠테이션

^[https://tt-a1i.github.io/archify/]

설치

Step 1 — 스킬 설치:

npx skills add tt-a1i/archify -g

또는 Cursor / Claude Code / Codex용 에이전트 인식 빠른 시작: https://tt-a1i.github.io/archify/start.html?agent=<agent>&type=architecture

Raven은 수동 ZIP 설치: archify.zip → ~/.raven/workspace/skills/archify^[https://tt-a1i.github.io/archify/]

Step 2 — 에이전트에게 Archify 사용 지시
Step 3 — 생성된 HTML을 브라우저에서 열고 채팅으로 정제

^[https://tt-a1i.github.io/archify/]

SKILL.md 작성 원칙

  • 타입 라우터: architecture, workflow, sequence, dataflow, lifecycle 5종
  • Mermaid 입력 변환: flowchart/graph → workflow/architecture, sequenceDiagram → sequence, stateDiagram → lifecycle
  • 빠른 작성 경로: 스키마+예시 읽기 → 아티팩트 우선 작성 → 매 편집 후 validate → deliver로 최종 승인
  • 작성 불변: 하나의 명확한 주요 경로, meta.visual_preset 기본 생략(classic), meta.subtitle 기본 생략, meta.animation: "trace" 옵트인, 데스크톱 1차 화면 아티팩트 기본, meta.locale은 렌더러 UI만 제어
  • Validation: validate로 9가지 아티팩트 검사 (showcase 통과 기준: 9개 전부 + 구성 오류 0 + 경고 0)
  • Delivery: spec 동면 스냅샷 → 렌더·검증 → HTML 원자적 커밋 → SHA-256 + 바이트 수 보고
  • Update awareness: scripts/check-update.mjs Node 실행, update_available 시 사용자 언어로 공지, severity=security면 보안 업데이트 명시, 설치 버전은 그대로 유지
  • Setup & fallback: 스킬 패키지 내 설치 불필요, 셸 접근 불가 시 수동 배치

^[https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md]

설계 원칙 (PRODUCT.md)

  1. Truth before spectacle: 모든 포커스·도달 가능성 쿼리·경로·스토리·소스 링크·수령(receipt)은 authored 또는 검증된 증거에서 도출
  2. One spatial narrative first: 주요 경로 먼저 가독성 확보 후 보조 관계·상세 공개

대상 사용자: 소프트웨어 엔지니어, 아키텍트, 기술 리드, 리뷰어, AI 코딩 에이전트
제품 목적: 저장소 증거 또는 제한된 시스템 설명을 에이전트 대화에서 바로 볼 수 있는 정제된 대화형 기술 맵으로 변환^[https://github.com/tt-a1i/archify/blob/main/PRODUCT.md]

기반 (lineage)

Cocoon-AI/architecture-diagram-generator v1.0의 포크 및 리라이트. 원본 시각적 언어는 Cocoon AI에 귀속. Archify 2.x는 테마, export, 타입드 렌더러, 검증, 접근성, 상호작용, 통합 CLI를 추가. 둘 다 MIT 라이선스.^[https://github.com/tt-a1i/archify]

저장소 실례

Archify는 공개 저장소 mco-org/mco를 9f1a1cf에서 추적(trace)해 검증된 맵을 생성한 사례가 있다.^[https://github.com/tt-a1i/archify/blob/main/README.md]

  • 아키텍처 다이어그램: 공유 카드 및 대화형 뷰 (view: dispatch-path)
  • downstream 도달 가능성(reach) 추적
  • 타입드 JSON 소스: docs/cases/mco-runtime.architecture.json

스폰서

관련 페이지

출처

백링크