cathrynlavery/diagram-design

당신의 브랜드에서 하나의 독립된 HTML + SVG 파일로 도표를 그리는 에이전트 스킬. 45가지 다이어그램 유형. 그림자 없음. 인어 같은 엉성한 요소도 없다.

웹사이트 · 갤러리 · 변경 로그

설치 · 무엇을 만드는지 · 퀵스타트 · 브랜드 매칭 · 수입 · 수출 · 기여하기

NPX 기술 추가로 캐서린라베리/다이어그램 디자인

에이전트에게 솔직하게 물어보세요:

• *“내 앱의 아키텍처 다이어그램을 만들어 주세요: 프론트엔드, 백엔드, 데이터베이스, Redis 캐시.” *
• *“2분기 프로젝트를 영향력과 노력 순으로 보여주는 사분면이 필요합니다.” *
• *“401에서 토큰 갱신이 포함된 베어러 콜 시퀀스를 주세요.” *
• *“온보드 다이어그램 디자인부터 https://yoursite.com”*로 (팔레트와 폰트를 끌어와서 이후의 모든 다이어그램이 사이트와 일치하도록 합니다)

에이전트는 타입을 선택하고 계획을 명시한 뒤, 더블 클릭으로 열 수 있는 .html 파일 하나를 작성합니다.

---

설치

Cursor, Claude Code, Codex, Qoder, GitHub Copilot, Gemini CLI, Cline, Windsurf, Amp 등 에이전트 스킬을 읽는 모든 호스트와 호환됩니다:

Claude Code에서는 플러그인 마켓플레이스에서 업데이트와 슬래시 명령어를 받습니다:

공식 빌드는 이 저장소에서만 제공됩니다.

Ask your agent in plain words:

• “Make me an architecture diagram of my app: frontend, backend, database, Redis cache.”
• “I need a quadrant showing Q2 projects by impact vs effort.”
• “Give me a sequence of a bearer call with token refresh on 401.”
• “Onboard diagram-design to https://yoursite.com” (pulls your palette and fonts so every diagram after this one matches your site)

The agent picks the type, states its plan, and writes one .html file you can open by double-clicking.

---

Install