프로젝트 소개

Excalidraw Diagram Skill은 코딩 에이전트가 자연어 설명을 Excalidraw 다이어그램으로 생성할 수 있게 해주는 스킬 패키지입니다. Claude Code 및 OpenCode와 같이 `.claude/skills/` 디렉토리에서 스킬을 로드하는 에이전트를 위해 설계되었으며, 프로젝트에 복사하여 다이어그램 생성 기능을 활성화할 수 있습니다. 이 프로젝트는 단순히 정보를 표시하는 것이 아니라 "시각적으로 논증"하는 다이어그램을 강조합니다. README에 따르면, 균일한 카드 그리드 대신 개념을 반영하도록 모양과 모양 그룹을 선택합니다. 예를 들어 일대다 관계에는 팬아웃(fan-out), 시퀀스에는 타임라인, 집계에는 수렴(convergence)을 사용합니다. 기술 다이어그램에는 실제 코드 스니펫과 JSON 페이로드를 증거 자료로 포함할 수 있습니다. 주목할 만한 기능은 내장된 시각적 검증입니다. Playwright 기반 렌더 파이프라인을 통해 에이전트가 자신의 출력을 확인하고, 텍스트 겹침, 화살표 정렬 오류, 간격 불균형과 같은 레이아웃 문제를 감지한 후 최종 다이어그램을 전달하기 전에 반복 수정할 수 있습니다. 색상과 브랜드 스타일은 `references/color-palette.md`에 중앙 집중화되어 있어, 이 파일을 교체하면 모든 다이어그램이 다른 팔레트를 따르게 됩니다. 설치 방법은 저장소를 클론하고 `.claude/skills/excalidraw-diagram`에 복사하는 것입니다. 렌더 파이프라인 설정은 SKILL.md를 가리켜 코딩 에이전트에 위임하거나, references 디렉토리 내에서 `uv sync` 및 `uv run playwright install chromium`을 사용하여 수동으로 수행할 수 있습니다. 사용법은 에이전트에게 다이어그램 생성을 요청하는 것만으로 간단합니다. 예를 들어 AG-UI 프로토콜이 AI 에이전트에서 프론트엔드 UI로 이벤트를 스트리밍하는 방법을 보여주는 다이어그램을 요청할 수 있습니다. 스킬은 개념 매핑, 레이아웃, JSON 생성, 렌더링, 시각적 검증을 처리합니다. 저장소 구조에는 설계 방법론과 워크플로우를 위한 SKILL.md와 함께, 색상 팔레트, 요소 템플릿, JSON 스키마 문서, `.excalidraw` 파일을 PNG로 변환하는 Python 렌더러, HTML 렌더 템플릿, Playwright용 Python 종속성이 포함된 references가 포함되어 있습니다.