다이어그램 디자인

디자이너가 싫어하지 않을 에디토리얼 다이어그램.

14가지 유형. Claude Code 스킬 하나. 60초 만에 당신의 브랜드 적용 — 스킬이 웹사이트를 읽고 색상과 폰트를 모든 다이어그램에 매핑합니다.

피그마(Figma) 불필요. 일반적인 둥근 박스 없음. 30분짜리 색상 선택 세션 없음.

왜 만들었는가

저는 littlemight.com에서 글을 쓰고 (부업으로 BestSelf.co를 운영합니다). 다이어그램이 필요할 때마다 — 아키텍처 스케치, 순서도, 가장 중요한 것들의 피라미드 — Claude에게 요청하면 사이트의 나머지 부분과 전혀 어울리지 않는 일반적인 둥근 박스 결과물이 돌아왔습니다. 피그마에서 30분을 씨름하거나 그냥 다이어그램을 건너뛰곤 했습니다.

그래서 Claude Code 스킬을 만들었습니다. 14가지 유형, 에디토리얼 품질, 웹사이트를 읽어 60초 만에 브랜드에 맞게 적용합니다.

최고 품질의 접근법은 보통 삭제입니다. 모든 노드는 존재 이유가 있어야 합니다. 액센트(accent) 색상은 독자가 가장 먼저 봐야 할 1~2가지 요소에만 사용됩니다. 목표 밀도: 4/10.

무엇을 만드는가

14개의 다이어그램 모두 세 가지 변형으로 제공됩니다: 미니멀 라이트, 미니멀 다크, 풀 에디토리얼. 빌드 단계, JS, 외부 이미지 없이 브라우저에서 직접 열 수 있습니다.

유형	설명
아키텍처(Architecture)	컴포넌트 + 연결
순서도(Flowchart)	의사결정 로직
시퀀스(Sequence)	시간에 따른 메시지
상태 머신(State machine)	상태 + 전환
ER / 데이터 모델(ER / data model)	엔티티 + 필드
타임라인(Timeline)	축 위의 이벤트
수영 레인(Swimlane)	기능 간 흐름
사분면(Quadrant)	2축 포지셔닝
중첩(Nested)	포함에 의한 계층
트리(Tree)	부모 → 자식
조직도(Org chart)	소유권 + 라우팅
벤 다이어그램(Venn)	집합 겹침
레이어 스택(Layer stack)	쌓인 추상화
피라미드 / 퍼널(Pyramid / funnel)	순위 계층 또는 이탈률
컨설턴트 2×2(Consultant 2×2)	시나리오 매트릭스 · 명명된 셀

라이브 갤러리 탐색: 브라우저에서 skills/diagram-design/assets/index.html을 열어 라이트 / 다크 / 풀 에디토리얼 탭으로 14개 다이어그램 모두를 살펴보세요.

설치

# 저장소를 어딘가에 클론한 후, 내부 스킬을 Claude Code의 스킬 디렉토리에 심볼릭 링크로 연결
git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design

실제 스킬은 저장소 내의 skills/diagram-design/에 있습니다 (같은 트리가 Claude Code 플러그인, Codex 플러그인, 독립형 스킬로 동작합니다). 심볼릭 링크는 Claude Code가 그 내부 디렉토리를 가리키도록 합니다.

Claude Code를 재시작하세요. 스킬은 diagram-design으로 등록되며 Claude에게 다이어그램을 만들어 달라고 요청할 때마다 활성화됩니다.

대안: 플러그인으로 설치

더 빠르게 설치할 수 있지만 — 스킬이 플러그인 캐시에 저장되므로 references/style-guide.md에 대한 편집이 플러그인 업데이트 후에는 유지되지 않습니다. 그냥 사용해보고 싶다면 이 방법을, 직접 스타일 가이드를 커스터마이징할 계획이라면 위의 클론 방법을 선택하세요.

Claude Code:

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

Claude Cowork: 커스터마이즈 → 디렉토리 → 플러그인 → + → cathrynlavery/diagram-design 붙여넣기 → 동기화, 그런 다음 개인 목록에서 설치.

Codex:

npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design

온보딩 — 브랜드처럼 보이게 만들기

핵심 포인트: 일반 템플릿이 아닌 당신의 색상과 타이포그래피로 에디토리얼 품질의 다이어그램을 제공합니다.

기본적으로 다이어그램은 깔끔한 제트-블랙(jet-black) + 아토믹 탠저린(atomic-tangerine) 팔레트로 렌더링됩니다 (화이트-스모크 배경, 제트-블랙 잉크, 아토믹-탠저린 액센트, 블루-슬레이트 뮤트, 실버 헤어라인). 바로 스크린샷을 찍어도 충분합니다. 하지만 60초 온보딩이 더 좋습니다 — 스킬이 웹사이트에서 브랜드를 추출하여 모든 다이어그램에 적용합니다.

흐름

사용자:    "onboard diagram-design to https://yoursite.com"
Claude:  → 홈페이지 가져오기
         → 주요 팔레트 + 폰트 스택 추출
         → 감지된 값을 시맨틱 역할에 매핑:
             paper, ink, muted, accent, link
         → 제안된 diff 표시
         → 토큰을 references/style-guide.md에 저장
사용자:    "yes, apply it"

이후 모든 새 다이어그램은 당신의 색상을 사용합니다. 웹사이트의 배경 색상이 다이어그램 배경이 됩니다. CTA 색상이 포컬 액센트가 됩니다. 본문 폰트 스택이 노드 레이블 폰트 패밀리가 됩니다.

추출 항목

사이트에서 감지	역할
`<body>` 배경	paper 토큰
기본 텍스트 색상	ink 토큰
보조 / 캡션 텍스트	muted 토큰
카드 또는 컨테이너	paper-2 토큰
가장 많이 사용된 브랜드 색상 (CTA, 링크, 제목)	accent 토큰
`<h1>` 폰트 패밀리	title 폰트
`<body>` 폰트 패밀리	node-name 폰트
`<code>` / `<pre>` 폰트	sublabel 폰트

대비 검사는 자동으로 이루어집니다.

토큰을 작성하기 전에 스킬은 ink over paper의 WCAG AA 대비를 검증합니다. 다이어그램 크기(9~12px)에서 대비가 실패하는 색상이 사이트에 있으면 조정된 값을 제안하고 이유를 설명합니다.

수동 재정의

직접 토큰을 설정하고 싶다면? skills/diagram-design/references/style-guide.md를 열고 테이블을 편집하세요. 모든 하위 요소가 거기서 읽습니다 — 14개 다이어그램, 어노테이션 프리미티브, 갤러리 모두 시맨틱 역할 이름(#eb6c36이 아닌 accent)을 상속받습니다.

첫 번째 실행 게이트

스킬은 브랜드 프로젝트에 기본 스킨이 적용된 다이어그램을 자동으로 출력하지 않습니다. 새 프로젝트에서 처음 사용할 때 style-guide.md가 커스터마이징되었는지 확인합니다. 그렇지 않으면 다음과 같이 물어봅니다:

"이 프로젝트의 첫 번째 다이어그램입니다. 스타일 가이드가 아직 기본값입니다. 온보딩을 실행하거나, 토큰을 직접 붙여넣거나, 기본값으로 진행하시겠습니까?"

전체 사양은 skills/diagram-design/references/onboarding.md를 참조하세요.

빠른 시작

# 갤러리를 열어 14개의 다이어그램 모두 확인
open ~/.claude/skills/diagram-design/assets/index.html

# Claude Code에서 그냥 물어보세요:
# "내 앱의 아키텍처 다이어그램을 만들어줘: 프론트엔드, 백엔드, 데이터베이스, Redis 캐시."
# "영향 vs 노력으로 Q2 프로젝트를 보여주는 사분면이 필요해."
# "OAuth 핸드셰이크의 시퀀스 다이어그램을 줘."

Claude가 올바른 유형을 선택하고 HTML을 작성하고 저장합니다. 템플릿에서 직접 시작할 수도 있습니다:

cp assets/template.html my-diagram.html        # 미니멀 라이트
cp assets/template-full.html my-diagram.html   # 요약 카드가 있는 에디토리얼

아키텍처

점진적 공개. SKILL.md는 간결한 인덱스 — Claude에게 유형 선택 방법과 세부 정보를 찾을 위치를 알려줍니다. 모든 유형은 자체 참조 파일에 있으며 관련될 때만 로드됩니다.

diagram-design/
├── SKILL.md                         — 최상위: 철학, 선택 가이드, 체크리스트
├── references/                      — 유형이나 프리미티브가 선택될 때만 로드
│   ├── style-guide.md               — 색상 + 폰트의 단일 진실 소스
│   ├── onboarding.md                — URL-to-토큰 흐름
│   ├── type-architecture.md
│   ├── type-flowchart.md
│   ├── type-sequence.md
│   ├── type-state.md
│   ├── type-er.md
│   ├── type-timeline.md
│   ├── type-swimlane.md
│   ├── type-quadrant.md
│   ├── type-nested.md
│   ├── type-tree.md
│   ├── type-org-chart.md
│   ├── type-layers.md
│   ├── type-venn.md
│   ├── type-pyramid.md
│   ├── primitive-annotation.md      — 이탤릭 세리프 에디토리얼 콜아웃
│   └── primitive-sketchy.md         — 손으로 그린 SVG 필터 변형
├── assets/
│   ├── index.html                   — 탭이 있는 라이브 갤러리
│   ├── template*.html               — 새 다이어그램용 스캐폴드
│   ├── example-<type>.html          — 3가지 변형 × 14가지 유형
│   └── example-quadrant-consultant.html  — 컨설턴트 특수 2×2 시나리오 매트릭스
└── docs/screenshots/                — README의 이미지들

이렇게 하면 Claude의 작업 컨텍스트가 타이트하게 유지되고 (필요한 것만 로드) 스킬을 쉽게 확장할 수 있습니다 — 새 type-<name>.md를 추가하고 선택 가이드에 연결하면 됩니다.

로드 시점

최상위 SKILL.md는 항상 컨텍스트에 있습니다. 그 외의 모든 것은 관련될 때만 가져옵니다 — 이것이 15개의 참조 파일이 있어도 스킬을 빠르게 유지하는 비결입니다.

요청	Claude가 로드하는 것
"순서도 만들어줘"	SKILL.md + references/type-flowchart.md
"아키텍처 다이어그램 만들어줘"	SKILL.md + references/type-architecture.md
"내 사이트에 스킬 온보딩해줘"	SKILL.md + references/onboarding.md + references/style-guide.md
"이 다이어그램에 에디토리얼 콜아웃 추가해줘"	SKILL.md + references/primitive-annotation.md
"손으로 그린 버전 줘"	SKILL.md + references/primitive-sketchy.md
일반적인 다이어그램 작업 (14가지 중 하나)	SKILL.md + 해당 유형의 참조 파일만

유형이 얼마나 많이 있든 Claude는 필요한 것만 읽습니다. 내일 새 유형을 추가해도 다른 것은 변하지 않습니다.

디자인 시스템 (한 단락으로)

액센트 색상 하나, 다이어그램당 1~2개의 포컬 요소. 세 가지 폰트 패밀리: Instrument Serif (제목 + 이탤릭 콜아웃), Geist 산세리프(Geist sans) (노드 이름), Geist Mono (기술적 서브레이블). 1px 헤어라인 테두리, 그림자 없음, 최대 border-radius 10px. 모든 좌표, 너비, 간격은 4로 나누어집니다 — 타협 불가, 다이어그램이 AI가 생성한 것처럼 보이지 않게 하는 요소입니다. Mono는 기술적 콘텐츠(포트, URL, 필드 유형)용이지 일반적인 "개발자" 미학이 아닙니다. 코랄 색조의 포컬 노드가 중요한 1~2가지 요소로 시선을 끌어당깁니다. 전체 사양은 SKILL.md에 있습니다.

프리미티브(Primitives)

어노테이션 콜아웃(Annotation callout) — 이탤릭 Instrument Serif + 점선 베지어 리더, 여백에 있는 에디토리얼 주석용. skills/diagram-design/references/primitive-annotation.md 참조.
스케치 필터(Sketchy filter) — 손으로 그린 변형을 위한 SVG turbulence + displacement map. 에세이에는 좋지만 기술 문서에는 부적합. skills/diagram-design/references/primitive-sketchy.md 참조.