TL;DR

Archify는 Claude·Codex·opencode용 에이전트 스킬로 자연어로 기술한 시스템 설명을 자체 포함 HTML 다이어그램으로 생성하고 브라우저에서 4× 네이티브 래스터와 dual-theme SVG를 내보내는 파이프라인을 제공한다. 테마 전환은 CSS custom properties와 `data-theme` 토글로 처리되며, SVG는 클론 후 스타일을 인라인하고 viewBox의 4배 크기로 캔버스에 래스터화해 업샘플링 없이 선명한 이미지를 만든다. 타입화된 렌더러는 ajv 기반 스키마 검증을 지원하며 post-render 검사로 레이아웃·화살표 충돌을 차단해 품질을 보장한다. 결과물은 자체 포함 HTML로 배포 가능하고 키보드 단축키와 클립보드 복사, 다수의 포맷 다운로드를 지원해 문서·프레젠테이션·README용 시각 자산 관리 비용을 낮춘다. 다만 고급 렌더러 검증을 위해선 스킬 디렉터리에서 `npm install`로 의존성을 설치해야 하고 일부 브라우저 기능(WebP, 클립보드 이미지)은 환경에 따라 제한이 있다.

주요 기능

• 자연어 문장으로 시스템 구조·워크플로·시퀀스·데이터 플로우·라이프사이클을 렌더링한다.
• 다크/라이트 테마 토글을 CSS 변수로 구현해 한 번의 HTML 파일에서 테마 전환을 유지한다.
• SVG를 클론해 스타일을 인라인하고 viewBox의 4배 해상도로 브라우저가 네이티브 래스터를 생성하게 해 고해상도 이미지를 출력한다.
• 단일 SVG 파일에 다크·라이트 변수 세트를 포함해 호스트의 prefers-color-scheme에 따라 색상이 전환되게 한다.
• 타입화된 렌더러와 ajv 기반 스키마 검증 및 post-render 검사로 비정상 출력 가능성을 낮춘다.

어떻게 동작하는가

사용자가 자연어로 구조나 흐름을 서술하면 에이전트가 Archify 렌더러를 호출해 내부 JSON/HTML 템플릿을 채우고 CSS custom properties로 테마를 적용한 SVG를 생성한다. 내보내기 파이프라인은 SVG의 스타일을 인라인한 뒤 클론에 width/height를 4× viewBox로 설정해 브라우저가 고해상도 래스터를 직접 생성하도록 하고 `toBlob`으로 파일을 만들어 제공한다.

해결 문제

디자인 스킬이 없거나 일관된 다크/라이트 에셋 관리가 번거로운 팀이 자연어로 기술한 시스템 설명을 즉시 고품질 아키텍처·워크플로 다이어그램으로 변환하는 문제를 해결한다. 또한 문서용 이미지의 테마 동기화와 고해상도 내보내기, 단일 파일 공유라는 배포 난제를 동시에 처리한다.

지금 주목받는 이유

v2.x 계열에서 다크/라이트 테마 통합, dual-theme SVG, 그리고 4× 네이티브 래스터와 렌더러 검증 파이프라인을 단계적으로 추가하면서 기능적 완성도가 높아진 점이 최근 주목을 받는 이유이다.

차별점

• 단일 SVG 파일에 다크·라이트 변수 세트를 함께 내장하고 `@media (prefers-color-scheme)`를 사용해 호스트 환경의 색상 선호에 따라 자동으로 테마가 전환되게 한다는 점에서 README·블로그용 이미지 관리 부담을 줄였다.
• 브라우저에서 SVG를 클론해 width/height를 viewBox의 4배로 설정하고 캔버스에 자연 크기로 그려 네이티브 고해상도 래스터를 얻는 방식으로 업샘플링 블러 문제를 피했다.
• 렌더러 입력에 대한 ajv 스키마 검증과 `scripts/check-render-output.mjs` 기반의 포스트 렌더 검사를 포함해 레이아웃·화살표 충돌 같은 출력 품질 문제를 사전 차단하는 파이프라인을 갖추었다.
• 생성 결과가 자체 포함 HTML로 제공되어 추가 빌드나 서버 인프라 없이 공유·열람·토글 가능한 출력물을 즉시 전달할 수 있다.

사용 사례

• 채팅 기반 워크플로에서 자연어로 시스템 구조를 기술해 개발 문서와 프레젠테이션용 고해상도 다이어그램을 즉시 생성하는 데 사용된다.
• CI·운영 문서에서 요청·승인·트레이스 경로 같은 복잡한 워크플로를 기술해 가시화하고, 이후 변경을 채팅으로 반복 반영해 다이어그램을 신속히 수정하는 데 활용된다.
• 단일 SVG를 README나 블로그에 삽입해 읽는 이의 다크/라이트 선호에 따라 자동으로 테마가 바뀌는 문서 자산을 유지관리하는 목적에 적합하다.
• 교육·온보딩 자료에서 시퀀스·데이터플로우·라이프사이클을 예시로 빠르게 제작해 전달 자료로 사용한다.

시작하기

archify.zip 파일을 다운로드해 사용하는 에이전트 환경의 스킬 디렉터리에 압축을 푼 뒤 브라우저로 생성된 examples/*.html을 열어 작동을 확인하면 된다. 타입화된 렌더러의 스키마 검증을 사용하려면 설치된 스킬 디렉터리에서 `npm install`을 한 번 실행해 ajv 등 의존성을 설치해야 한다. 생성물 검증을 실행하려면 `node scripts/check-render-output.mjs output.html`을 호출해 포스트 렌더 검사 결과를 확인하면 된다.

요구사항

• 타입화된 렌더러의 스키마 검증을 위해 Node.js 환경에서 ajv 설치가 필요하며, 이는 `npm install`로 해결된다.
• 브라우저 기반 내보내기(ClipboardItem, canvas.toBlob, image/webp 인코더 등)는 최신 브라우저 기능을 요구하며 WebP 및 클립보드 이미지 지원은 브라우저별 차이가 있다.
• 생성된 HTML을 열려면 별도 빌드나 서버가 필요하지 않으나 픽셀 완전 재현을 위해 로컬에 JetBrains Mono 같은 지정 폰트를 설치하면 일치도가 높아진다.

이미지 분석