Animated diagram
작은 JSON 설명(그리드 셀에 노드 배치, 번호가 매겨진 단계, 그룹)을 작성하면 렌더러가 레이아웃을 배치하고 검사한 후, 90프레임을 렌더링하여 <name>.gif, <name>.mp4, <name>.png 및 <name>.check.json 파일을 생성합니다. 사용자는 좌표를 직접 지정할 필요가 없습니다.
$SKILL는 이 파일이 있는 폴더입니다 (CLAUDE_SKILL_DIR). Node ≥ 22, Google Chrome 및 ffmpeg가 필요합니다. 머신당 한 번: npm install --prefix "$SKILL". ANIMATED_DIAGRAM_RENDER_LOCK이 설정되어 있으면 모든 렌더가 해당 잠금 디렉토리를 기다리므로, 한 번에 하나의 Chrome만 렌더링합니다.
워크플로우
1. 테마 먼저 설정
다이어그램이 위치할 곳 옆에 있는 diagram-theme.json을 찾습니다 (render는 해당 폴더를 먼저 확인한 다음 작업 폴더를 확인합니다). 없으면 먼저 설정합니다. 사용자가 원하는 것을 물어보세요:
node "$SKILL/scripts/cli.mjs" theme --preset machine-room-dark # 또는 light, dark
node "$SKILL/scripts/cli.mjs" theme --brand "#E4572E,#17BEBB" --mode light
node "$SKILL/scripts/cli.mjs" theme --from-image logo.png --mode dark
node "$SKILL/scripts/cli.mjs" theme --check my-theme.json # 수동 편집 테마 검증
각각 diagram-theme.json을 쓰고 (--out으로 변경 가능) 색상과 대비 비율을 출력합니다. 모든 텍스트 색상과 배경 간 대비(4.5:1 미만) 또는 어두운 규칙에 실패한 테마는 거부되며, 가장 가까운 통과 색상이 제안됩니다. 자세한 내용: reference/theme-setup.md.
2. 내용
사용자의 주제 또는 원본 텍스트에서 노드와 번호가 매겨진 단계를 초안으로 작성하고, 채팅에 단계 목록을 표시합니다:
1. 사용자 → DNS: DNS 조회
2. DNS → 사용자: 가장 가까운 에지 IP (응답)
3. 사용자 → 에지 서버: GET /logo.png
사용자가 확인할 때까지 기다리세요. 모든 화살표는 주장입니다: 렌더링하기 전에 각각을 소스와 대조 확인하세요.
3. JSON
reference/templates.md에서 템플릿(flow-grid, comparison, stack 또는 map)을 선택하고 reference/diagram-format.md에 따라 <topic>.json을 작성합니다. 가장 가까운 예시를 참조하세요: examples/cdn.json (flow-grid), examples/cache-strategies.json (comparison), examples/web-stack.json (stack) 또는 examples/anatomy-of-an-ai-app.json (map). 셀별로만 노드를 배치하고, offset은 몇 픽셀 이동이 필요한 최후의 수단입니다.
사용자가 단일 경로가 아닌 전체 시스템을 한 페이지에 원할 때 map을 선택합니다: 최대 6개의 색상 영역에 12~25개의 노드, 단어는 그림 옆 범례에 표시합니다. map에서는 배치가 모든 것을 결정합니다: 가장 많은 화살표가 연결된 노드를 중앙에 배치하고, 그 노드가 통신하는 항목을 옆에 배치하며, 대부분의 단계가 이웃을 연결하도록 합니다. 짧은 title과 subtitle을 제공합니다.
4. 아이콘
node "$SKILL/scripts/cli.mjs" icons # 라이브러리: user, laptop, phone, rack, tower, database, cache, …
노드에 라이브러리에 없는 아이콘이 필요하면 reference/icon-rulebook.md에 따라 ./diagram-icons/<name>.js를 다이어그램 옆에 그린 후, 사용 전에 기존 아이콘 두 개와 함께 2배로 검토합니다:
node "$SKILL/scripts/cli.mjs" icon-sheet <name> laptop rack --out sheet.png
5. 렌더
node "$SKILL/scripts/cli.mjs" render <topic>.json --out out/ # --theme <preset|file>, --style filled|line|duotone
종료 코드: 0 정상 · 2 검사 실패 (정적 이미지와 <topic>.check.json은 기록되지만 GIF는 없음) · 3 테마 없음 · 1 잘못된 입력 (다이어그램 또는 테마의 오류가 JSON 경로와 함께 출력됨).
종료 코드 2인 경우, out/<topic>.check.json을 읽습니다. 각 실패에는 code, 관련 ids (노드 id, 단계 화살표는 s<index>) 및 detail이 있습니다. JSON을 수정하고(셀 이동, 레이블 단축, 단계 분할, 행 수 줄이기) 다시 렌더링합니다 — 최대 3회, map의 경우 6회까지 가능하며, 여기서 허브를 이동하면 많은 화살표를 한 번에 정리할 수 있습니다. 코드별 수정 방법은 reference/templates.md에 있습니다. 그런 다음 PNG를 열어 직접 확인합니다: 검사는 충돌을 잡지만 어색한 읽기 순서는 잡지 않습니다.
6. 보고
사용자에게 GIF, MP4 및 PNG의 경로, GIF 크기(1080×1350에서 약 1 MB, 포스터용 3 MB 예산) 및 검사 요약(경고 포함)을 제공합니다.