AI 에이전트용 다이어그램 생성 스킬 'Diagram Design', 39종…

GitHub에서 공개된 Diagram Design은 Claude Code, Codex, Factory Droid, Pi 등 AI 에이전트 호스트에서 사용할 수 있는 다이어그램 생성 스킬로, 총 39종의 편집 가능한 다이어그램 유형을 지원합니다.

주요 특징 및 디자인 원칙

출력 형식: JS 빌드가 필요 없는 HTML+SVG 기반의 정적 산출물을 생성하며, Mermaid 의존성을 배제합니다. 기본은 정적 HTML이며, 순차적 설명을 위해 선택적으로 모션 기능을 제공합니다.
디자인 규칙: 그림자(shadow) 사용을 금지하고, 둥근 박스의 최대 반지름을 10px로 제한합니다. 강조 색상(accent color)은 1개로 제한하며, 모든 좌표와 간격을 4의 배수로 유지하여 일관된 디자인을 보장합니다.
접근성 및 검증: SVG에 접근성 속성을 포함하며, lint-skin.py 스크립트를 통해 디자인 규칙 위반을 감지합니다. CI 체계에서는 semantic routing, motion asset, controller contract 등을 검증합니다.
임포트 기능: draw.io, Mermaid, Excalidraw 파일을 임포트할 때 원본의 디자인은 무시하고 관계와 방향만 유지하여 자체 디자인 시스템으로 재렌더링합니다.