Diagram Design은 Claude Code에서 아키텍처, 플로차트, 시퀀스, 상태 머신, ERD, 타임라인 같은 다이어그램을 HTML+SVG로 생성하는 스킬이다. “디자이너가 싫어하지 않을 editorial diagrams”를 목표로, 기본 rounded box 스타일과 Mermaid식 획일성을 피하는 데 초점을 둔다.
무엇을 제공하는가
저장소는 14개 다이어그램 유형과 세 가지 시각 변형을 제공한다. 각 결과물은 브라우저에서 바로 열 수 있는 self-contained HTML/SVG 파일이다.
| 유형 | 용도 |
|---|---|
| Architecture | 시스템 구성 요소와 연결 |
| Flowchart | 조건 분기와 의사결정 흐름 |
| Sequence | 시간 순서에 따른 메시지 |
| State machine | 상태와 전이 |
| ER / data model | 엔티티, 필드, 관계 |
| Timeline | 사건의 시간축 |
| Swimlane | 역할·팀 간 흐름 |
| Quadrant / 2×2 | 두 축 기반 포지셔닝 |
| Nested / Tree / Org chart | 계층 구조 |
| Venn / Layers / Pyramid | 개념 비교와 계층화 |
디자인 원칙
Diagram Design의 핵심은 정보 밀도를 낮추고 초점을 분명히 하는 것이다. README는 노드가 모두 존재 이유를 가져야 하며, accent color는 독자가 먼저 봐야 할 1~2곳에만 써야 한다고 설명한다.
이 접근은 AI가 만든 다이어그램에서 흔히 보이는 문제를 줄인다.
- 모든 박스가 같은 시각적 무게를 갖는 문제
- 그림자와 둥근 박스가 과하게 반복되는 문제
- 브랜드 색상과 폰트를 무시한 generic output
- 설명이 너무 많아 구조가 보이지 않는 문제
브랜드 온보딩
특이한 점은 스킬이 사용자의 웹사이트를 읽어 색상과 폰트를 추출하는 onboarding 흐름을 제공한다는 것이다.
| 사이트에서 감지 | 다이어그램 토큰 |
|---|---|
| body 배경 | paper |
| 본문 색상 | ink |
| 보조 텍스트 | muted |
| CTA·링크·강조색 | accent |
| H1 폰트 | title font |
| body 폰트 | node label font |
추출 후 contrast check를 수행하고, references/style-guide.md에 semantic token을 저장한다. 이후 생성되는 모든 다이어그램은 해당 토큰을 사용한다.
설치 방식
Claude Code에서는 저장소를 클론한 뒤 내부 스킬 디렉터리를 ~/.claude/skills/diagram-design으로 symlink하는 방식을 권장한다. Codex에서는 npx skills add로 설치할 수 있다.
git clone [email protected]:cathrynlavery/diagram-design.git ~/code/diagram-design
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design어디에 적합한가
- 기술 블로그와 문서에 넣을 설명용 다이어그램을 빠르게 만들 때
- Claude Code가 만드는 아키텍처 그림의 품질을 팀 스타일에 맞추고 싶을 때
- Mermaid보다 더 편집물 같은 정적 HTML/SVG 결과물이 필요할 때
- UI/문서 생성 에이전트에 브랜드 디자인 규칙을 주입하고 싶을 때
관련 문서
- agent-skills — AI 에이전트의 능력을 확장하는 스킬 시스템
- taste-skill — AI 에이전트의 UI 품질을 높이는 프론트엔드 스킬
- nothing-design-skill — Nothing 스타일 UI 생성 스킬
- claude-design — Claude의 디자인 출력 기능
참고 자료
- cathrynlavery/diagram-design — GitHub 공식 저장소