cathrynlavery/diagram-design

Diagram Design – AI 에이전트 기반 편집용 다이어그램

개요 – Diagram Design은 재사용 가능한 Agent Skill(Claude Code, Codex, GitHub Copilot, Factory Droid, Pi, Kiro, OpenCode 등과 호환)으로, 자연어 요청을 독립형 HTML + SVG 다이어그램 세트로 변환합니다. 이 스킬은 30개 이상의 편집 스타일 다이어그램 유형(아키텍처, 순서도, 생키 다이어그램, 워들리 맵, 칸반 등)을 세 가지 시각적 변형(미니멀 라이트, 미니멀 다크, 풀 에디토리얼)으로 제공합니다. 다이어그램은 JavaScript, 외부 이미지, 그림자 없이 렌더링되므로 브라우저에서 즉시 확인하거나 마크다운에 삽입할 수 있습니다.

---

주요 기능(README 설명 기준)

• 광범위한 다이어그램 카탈로그 – 아키텍처, 프로세스, 데이터, 차트 및 프로젝트 관리 뷰를 아우르는 30개의 정적 다이어그램 문법. 버전 2.5.10에서 추가된 새로운 유형으로는 생키 다이어그램, 피시본 다이어그램, 워들리 맵, 칸반, 사용자 여정 지도, 배포도, 의존성 그래프, UML 클래스 다이어그램, 스토리 맵, 데이터베이스 스키마가 있습니다.
• 세 가지 시각적 변형 – 각 다이어그램은 미니멀 라이트, 미니멀 다크 또는 풀 에디토리얼 스타일로 렌더링할 수 있습니다. 모든 변형은 순수 SVG/HTML 파일이며 브라우저에서 직접 열 수 있습니다.
• 브랜드 온보딩 – 원클릭 "onboard diagram-design to " 흐름을 통해 홈페이지를 가져와 주요 색상 팔레트와 글꼴 스택을 추출하고, 이를 의미론적 토큰(종이, 잉크, 강조색 등)에 매핑하여 references/style-guide.md에 기록합니다. 이후 이 스킬은 모든 후속 다이어그램에 해당 토큰을 사용하여 브랜드 색상과 타이포그래피의 일관성을 보장합니다.
• 내장된 접근성 – 모든 SVG에는 적절한 role=이 포함되어 있습니다