Archify

아키텍처 다이어그램을 HTML 로 뽑는 에이전트 스킬

npx skills add tt-a1i/archify -g

아키텍처와 워크플로, 시퀀스, 데이터 흐름 다이어그램을 그리게 하는 에이전트 스킬입니다. 결과가 외부 의존 없는 단일 HTML 파일이라 그대로 열거나 이미지로 내보냅니다. skills CLI 로 여러 에이전트에 설치합니다.

판단

이럴 때 씁니다

  • 설계 논의에 쓸 아키텍처 다이어그램을 에이전트에게 그리게 하고 싶을 때
  • 시퀀스나 데이터 흐름을 문서에 넣을 그림으로 만들어야 할 때
  • 결과물을 외부 의존 없는 단일 파일로 받아 그대로 공유하고 싶을 때
  • 여러 코딩 에이전트에서 같은 다이어그램 규칙을 쓰고 싶을 때

이럴 땐 쓰지 마세요

  • 이미 Mermaid 나 그림 도구로 팀 표준이 잡혀 있을 때
  • 정밀한 배치 제어가 필요한 인쇄용 도면일 때
  • 스킬 설치를 지원하지 않는 에이전트를 쓸 때

차별점

  • 결과가 외부 의존 없는 단일 HTML 파일이라 그대로 열고 공유할 수 있습니다.
  • 아키텍처와 워크플로, 시퀀스, 데이터 흐름, 수명 주기를 한 스킬에서 다룹니다.
  • skills CLI 로 여러 에이전트에 같은 방식으로 설치합니다.
  • 저장소에 예제와 작성 지침이 함께 있어 결과를 예측하기 쉽습니다.

워크플로

  1. 01npx skills add tt-a1i/archify -g 로 스킬을 설치합니다.
  2. 02에이전트에게 그릴 대상과 관점을 말해 다이어그램을 요청합니다.
  3. 03생성된 HTML 을 브라우저에서 열어 확인하고 필요하면 수정을 지시합니다.
  4. 04문서에 넣을 때는 이미지로 내보냅니다.

주요 명령

명령설명
npx skills add tt-a1i/archify -g스킬을 전역으로 설치합니다.
npx -y skills add tt-a1i/archify --skill archify --agent cursor특정 에이전트를 지정해 설치합니다.
npx skills use tt-a1i/archify@archify --agent codex설치 없이 한 번 실행해 봅니다.

함정

설치 전에 확인하세요

  • 출력이 단일 HTML 이라 편집은 파일을 직접 고치거나 에이전트에게 다시 시키는 방식이 됩니다.
  • 다이어그램 품질은 입력 설명의 구체성에 크게 좌우됩니다. 구성 요소와 관계를 먼저 정리해 주는 편이 낫습니다.
  • 스킬 설치 방식이라 에이전트가 스킬 규격을 지원해야 합니다.

비교

Mermaid 는 텍스트로 관리하고 버전을 추적하기 좋습니다. Archify 는 모양과 배치의 완성도를 높이는 대신 결과가 HTML 파일입니다. 문서 저장소에 다이어그램 소스를 남겨야 한다면 Mermaid 가, 발표와 공유에 바로 쓸 그림이 필요하면 이쪽이 맞습니다.

최근 변경

v2.16.0 은 뷰어 쪽 문제를 손봤습니다. 의도 추적 화면에서 작성자가 지정한 방향이 유지되도록 고쳤고, 자동 경로와 경계 구성이 겹쳐 보이던 렌더링을 정리했으며, 내비게이션 도크가 범례를 가리던 문제를 없앴습니다. RAG 파이프라인 예제와 이중 언어 작성 안내서가 추가됐습니다.