Cathryn Lavery가 만든 오픈소스 프로젝트(
cathrynlavery/diagram-design, MIT).
왜 필요한가?
만든 사람인 Cathryn Lavery는 블로그 글에 넣을 다이어그램을 Claude에게 요청할 때마다 둥근 상자를 나열한, 사이트의 다른 부분과 전혀 어울리지 않는 그림이 나와서 Figma로 30분씩 손보거나 다이어그램을 아예 빼곤 했다고 README에 적었습니다.
모델은 내용을 이미 이해하고 있었고 부족한 것은 디자인 기준이었습니다. 그래서 그 기준을 글로 정리한 것이 이 스킬입니다. 중요한 한두 가지에만 쓰는 강조색 하나, 1px 선, 그림자 없음, 모든 좌표를 4px 격자에 맞추기가 그 규칙입니다.
무엇을 만들 수 있나
README의 요청 예시입니다. 평소 쓰는 말로 요청하면 됩니다.
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.에이전트가 유형을 고르고, 계획을 밝힌 뒤, 더블클릭으로 열 수 있는 .html 파일 하나를 만듭니다.
README 기준으로 45가지 유형을 지원하며, 유형마다 밝은 배경, 어두운 배경, 요약 카드가 붙는 편집형 세 가지 변형이 있습니다. 다음은 그 일부입니다.
| 분류 | 유형 예시 |
|---|---|
| 시스템 구조 | Architecture, Deployment, Dependency graph, Layer stack |
| 흐름과 순서 | Flowchart, Sequence, State machine, Swimlane, Process |
| 데이터 모델 | ER / data model, Database schema, UML class |
| 일정과 계획 | Timeline, Gantt, Kanban, Story map |
| 차트 | Bar chart, Line chart, Scatter plot, Heatmap, Sankey, Treemap |
| 전략과 분석 | Quadrant, Venn, Pyramid / funnel, Fishbone, Wardley map, User journey |
전체 유형과 예시는 갤러리에서 직접 볼 수 있습니다.
핵심 기능
-
정해진 디자인 규칙으로 그리기
강조색은 하나만 쓰고, 다이어그램마다 독자가 먼저 봐야 할 한두 요소에만 적용합니다. 테두리는 1px 선이고 그림자는 없으며, 모든 좌표와 너비, 간격이 4로 나누어떨어집니다. README는 이 격자 규칙이 다이어그램이 AI가 만든 것처럼 보이지 않게 하는 핵심이라고 설명합니다.
-
웹사이트에서 브랜드 가져오기
기본 색상은 검정과 탠저린(주황 계열)입니다. 웹사이트 주소를 주면 홈페이지에서 주요 색상과 글꼴을 추출해 배경, 본문, 보조, 강조 같은 역할에 대응시키고, 변경 내용을 보여 준 뒤 스타일 가이드에 기록합니다. 이후 만드는 다이어그램은 모두 그 색과 글꼴을 씁니다. 기록하기 전에 본문 글자와 배경의 대비가 WCAG AA 기준을 넘는지 확인하고, 기준에 못 미치면 조정한 값을 이유와 함께 제안합니다.
-
기존 다이어그램 다시 그리기
draw.io, Mermaid, Excalidraw 파일을 주면 같은 내용을 이 디자인 규칙으로 다시 그립니다. 출력 형식, 크기(문서용, 16:9 슬라이드용, 소셜 카드용 등), 세부 수준, 대상 독자를 지정할 수 있습니다. 가져올 때마다 무엇을 합치고 줄이고 뺐는지 적은 목록(fidelity ledger)을 함께 보여 줍니다. 구성 요소, 관계, 묶음, 방향은 유지하고, 원본의 좌표, 색, 글꼴은 가져오지 않습니다.
-
SVG와 PNG로 내보내기
Figma, 슬라이드, 소셜 카드에 쓸 수 있게 다이어그램 부분만 SVG나 PNG로 내보냅니다. Claude Code에서는
/diagram-design:export-diagram명령을 쓰거나 “Export this diagram as SVG and PNG.”처럼 말로 요청합니다. -
여러 고객사 브랜드를 프로필로 관리
브랜드를 한 번 가져온 뒤 이름 붙인 프로필로 저장하고, 프로젝트마다
.diagram-design표시 파일에 프로필 이름을 적어 둡니다. 프로필은~/.diagram-design/profiles/에 저장되어 프로젝트마다 다른 브랜드를 쓸 수 있습니다. -
접근성 기본 적용
모든 다이어그램의 SVG에 화면 낭독기가 읽을 제목과 설명이 들어갑니다. 움직임은 선택 사항이며 기본값은 정적인 그림입니다.
사용 방법
Claude Code에서는 플러그인 마켓플레이스로 설치합니다. 이 방식이 업데이트와 슬래시 명령을 함께 제공합니다.
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-designCursor, Codex, GitHub Copilot, Gemini CLI 등 Agent Skills를 읽는 다른 호스트에서는 다음 명령으로 설치합니다.
npx skills add cathrynlavery/diagram-design설치한 뒤 에이전트에게 다이어그램을 요청합니다. 새 프로젝트에서 처음 쓸 때 스타일 가이드가 기본값 그대로이면, 스킬은 그리기를 멈추고 브랜드 가져오기를 실행할지, 값을 직접 붙여 넣을지, 기본값으로 진행할지 묻습니다.
브랜드를 맞추려면 다음처럼 요청합니다.
Onboard diagram-design to https://yoursite.com기존 다이어그램을 다시 그리거나 내보낼 때는 Claude Code에서 다음 명령을 씁니다.
/diagram-design:import-mermaid README.md --diagram=all
/diagram-design:import-drawio platform.drawio --size=slide-16x9 --detail=simplified --audience=executive
/diagram-design:export-diagram path/to/diagram.html --png-only --scale=3알아두면 좋은 점
- README가 직접 밝힌 한계 — 결과 품질은 사용하는 모델에 좌우되고, 같은 프롬프트라도 배치가 매번 달라질 수 있습니다. 결과물은 편집 가능한 소스 형식이 아니어서 풀 리퀘스트에서 비교할 텍스트도, 상자를 끌어 옮길 캔버스도 없습니다. README는 Git에 두고 스프린트마다 바뀌는 문서에는 Mermaid가 여전히 더 맞으며, 이 스킬은 발행할 다이어그램을 위한 것이라고 적었습니다.
- 쓰지 않는 편이 나은 경우 — README는 항목 나열이나 전후 비교에는 표나 글머리표를, 상자 하나짜리 그림에는 문장 한 줄을 권합니다. 그리기 전에 잘 쓴 문단보다 독자가 더 많이 얻을 수 있는지 먼저 따져 보라고 안내합니다.
- 텔레메트리 없음 —
PRIVACY.md는 서버, 계정, 분석, 텔레메트리가 없다고 밝힙니다. 프롬프트와 파일은 사용하는 에이전트의 제공자가 그쪽 정책에 따라 처리합니다. - Google Fonts 요청 — 만든 다이어그램은 브라우저에서 열 때 Instrument Serif, Geist, Geist Mono를 Google Fonts에서 불러옵니다. 이것이 파일이 보내는 유일한 네트워크 요청이며, 시스템 글꼴을 요청하면 네트워크 요청이 없는 파일이 만들어집니다.
- PNG 내보내기에는 Playwright 필요 — PNG는 Playwright로 그려 내므로
pip install playwright && playwright install chromium을 한 번 실행해 두어야 합니다. SVG 내보내기에는 필요하지 않습니다. npx skills add는 스킬만 설치 — 이 방식에는/export-diagram,/import-mermaid,/profile,/doctor같은 명령이 포함되지 않고, 마켓플레이스 업데이트도 자동으로 따라가지 않습니다.npx skills update diagram-design으로 갱신합니다. README는 마켓플레이스가 있는 호스트에서는 마켓플레이스 설치를 권합니다.- 자동 업데이트는 직접 켜야 함 — Claude Code는 외부 마켓플레이스의 자동 업데이트를 기본으로 꺼 둡니다.
/plugin의 Marketplaces에서 diagram-design을 고르고 Enable auto-update를 선택합니다. - 유형 개수 표기 — README 본문은 45가지로 적고 있으나, 저장소 설명과 갤러리 번호는 44까지입니다. 이 글은 README 본문 기준으로 적었습니다.
- 설치수 출처 — 위 설치수는 skills.sh의
npx skills텔레메트리 기준입니다. claude.com/plugins에는 등록되어 있지 않습니다. - 공식 배포처 — README는 공식 빌드가 이 저장소에서만 나오며, 다른 이름으로 올라온 목록은 비공식 사본이라고 안내합니다.
- 출처 — cathrynlavery/diagram-design (MIT), 웹사이트: diagramdesign.dev.