Diagram Design

발표용 다이어그램을 깔끔하게 그릴 때

에이전트가 아키텍처 그림, 순서도, 차트 같은 45종 다이어그램을 일관된 편집 디자인 스타일의 HTML 파일 하나로 그리게 하는 스킬입니다.

6.5만스킬UI 디자인cathrynlavery 제작 · 비공식 한국어 정리

설치

설치 전에 알아 둘 것

PNG로 내보내려면 pip install playwright && playwright install chromium을 한 번 실행해 둡니다.

아래 방법 중 하나만 따라 하면 됩니다.

아래 명령은 Claude Code 기준입니다. Codex, Cursor, Gemini CLI에서는 원본 저장소의 설치 안내를 따르세요.

방법 1 Claude Code 플러그인

업데이트와 내보내기, 가져오기 명령이 함께 설치됩니다. 자동 업데이트는 /plugin의 Marketplaces에서 직접 켭니다.

  1. Claude Code에서 입력
    /plugin marketplace add cathrynlavery/diagram-design
  2. Claude Code에서 입력
    /plugin install diagram-design@diagram-design

방법 2 Codex 플러그인

  1. 터미널에서 실행
    codex plugin marketplace add cathrynlavery/diagram-design
  2. 터미널에서 실행
    codex plugin add diagram-design@diagram-design

방법 3 npx로 스킬만 설치

Cursor, Gemini CLI처럼 Agent Skills를 읽는 도구에 씁니다. 슬래시 명령은 빠지고, 업데이트는 npx skills update diagram-design으로 직접 받습니다.

  1. 터미널에서 실행
    npx skills add cathrynlavery/diagram-design
원본 저장소

언제 쓰면 좋나

블로그 글, 발표 자료, 제안서에 넣을 다이어그램을 에이전트에게 맡기고 싶은데 기본 결과물이 둥근 상자만 늘어놓은 모양일 때 씁니다. 말로 설명하면 아키텍처, 시퀀스, ER, 간트 같은 45종 중 알맞은 형태를 골라 브라우저로 바로 여는 파일 하나를 만듭니다. 웹사이트 주소를 주면 색과 글꼴을 가져와 브랜드에 맞추고, 기존 Mermaid, draw.io, Excalidraw 파일을 다시 그릴 수도 있습니다.

한눈에

지원 도구
Claude Code, Codex, Cursor, Gemini CLI
라이선스
MIT
최근 업데이트
2026-11-06
정보 확인일
2026-11-06

주의할 점

  • 결과물은 편집용 원본이 아닙니다. Git에서 텍스트로 비교할 수 없고 상자를 끌어 옮길 수도 없어서, 고치려면 에이전트에게 다시 요청하거나 SVG를 직접 수정합니다. 저장소에 두고 자주 바뀌는 문서라면 README도 Mermaid를 권합니다.
  • 결과 품질은 쓰는 모델에 따라 달라지고, 같은 요청도 배치가 다르게 나올 수 있습니다.
  • 새 프로젝트에서 처음 그릴 때 스타일 가이드가 기본값이면 브랜드 설정을 할지 먼저 묻습니다.
  • 기본 글꼴을 Google Fonts에서 불러오므로, 파일을 여는 사람의 IP와 브라우저 정보가 Google에 전달됩니다. 시스템 글꼴로 요청하면 네트워크 요청이 없습니다. 스킬 자체에는 서버나 사용 데이터 수집이 없다고 밝히고 있습니다.
  • 한글 라벨은 Noto 글꼴로 표시하는 규칙이 스타일 가이드에 들어 있습니다. 한글은 12px 아래로 줄이지 않고, 포트나 URL 같은 보조 표기는 영문으로 둡니다.
  • 설치본의 스타일 가이드를 직접 고치면 업데이트 때 덮어써질 수 있습니다. 저장한 브랜드 프로필은 유지되고, 스타일 가이드를 고쳐 쓰려면 저장소를 복제해 연결합니다.
  • 내보낸 SVG와 PNG에는 다이어그램만 담기고, 편집 디자인 변형의 카드와 머리글은 빠집니다.

비슷한 도구

Diagram Design 대신 쓸 만한 도구와 같은 UI 디자인 카테고리에서 별이 많은 도구입니다.