TL;DR

이 저장소는 Claude Code, Codex, Pi용 diagram-design skill로, 일반적인 rounded box 대신 editorial 스타일의 다이어그램을 self-contained HTML과 SVG로 생성한다. Agent는 요청에 맞는 참조 문서만 선택해 Architecture, Flowchart, Sequence, Loop, 차트 등 여러 유형의 구조와 출력 템플릿을 적용한다. 홈페이지를 읽어 색상·font stack을 semantic token으로 매핑하고 WCAG AA contrast를 검사하며, draw.io 파일도 목적지 크기와 독자 수준에 맞춰 재구성한다. Figma·슬라이드·웹용 결과물을 빠르게 만들려는 팀에는 적합하지만, PNG export의 Playwright 의존성과 draw.io 원본 좌표·스타일 손실은 사용 전에 고려해야 한다.

핵심 포인트

• 이 저장소는 독립 실행형 라이브러리보다 Claude Code, Codex, Pi에서 호출하는 plugin-extension-skill이다. `skills/diagram-design/`의 공용 skill 파일을 Agent Skills 호환 도구가 읽고, 요청에 맞는 다이어그램 유형과 참조 문서를 선택한다. Claude Code에서는 marketplace 플러그인으로, Codex에서는 `npx skills add`, Pi에서는 패키지 설치 방식으로 사용할 수 있다.
• README는 Architecture, Flowchart, Sequence, State machine, ER, Timeline, Swimlane, Quadrant, Loop, 차트 등 27개 유형을 제공하며 각 유형에 minimal light, minimal dark, full-editorial 변형을 포함한다. 결과물은 JavaScript나 외부 이미지 없이 브라우저에서 바로 여는 self-contained HTML과 SVG로 구성된다. 저장소 설명에는 29개 유형으로 적혀 있고 README와 gallery는 27개로 표기하므로, 도입 전에 실제 `assets/` 파일 수를 확인하는 편이 안전하다.
• 이 skill은 사이트 홈페이지에서 배경색, 텍스트색, 보조색, 강조색, 제목·본문·코드용 font stack을 추출해 `references/style-guide.md`의 semantic token으로 변환한다. `ink`와 `paper`의 WCAG AA contrast를 검사한 뒤 제안된 변경을 승인하면 이후 다이어그램 전체에 브랜드 색상과 typography를 적용한다. 기본 디자인은 Instrument Serif, Geist sans, Geist Mono와 1px hairline, 최대 10px radius, 4px 단위 좌표, 1~2개의 accent focal 요소를 사용해 장식보다 정보 구조에 초점을 둔다.
• draw.io, diagrams.net 파일은 `drawio_extract.py`를 거쳐 구성 요소와 관계를 추출한 뒤 목적지의 format, size, detail, audience에 맞춰 다시 그린다. HTML·SVG·PNG·HTML+PNG 출력, 문서·슬라이드·소셜·인쇄용 크기, faithful·balanced·simplified 상세도, engineer·mixed·executive 문구 수준을 조합할 수 있다. PNG export에는 Playwright와 Chromium 설치가 필요하고, import 과정에서 원본 좌표·팔레트·font·대각선 connector는 유지되지 않으므로 fidelity ledger로 병합·축약·삭제 항목을 확인해야 한다.

이미지 분석