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, 클립보드 이미지)은 환경에 따라 제한이 있다.

핵심 포인트

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

이미지 분석