---
원본_제목: "Diagram Design (cathrynlavery/diagram-design)"
창작_제목: "피그마 없이 60초, 내 브랜드 색을 입는 다이어그램 39종"
원본_URL: https://github.com/cathrynlavery/diagram-design
공식_갤러리: https://cathrynlavery.github.io/diagram-design/
정리: 다비(davi.kr) https://davi.kr/
정리일: 2026-09-15
라이선스: MIT
확인_시점_지표: "스타 32.2k, 포크 2.1k, 커밋 135건, 버전 2.5.10"
---

> 원본 링크: https://github.com/cathrynlavery/diagram-design
> 갤러리: https://cathrynlavery.github.io/diagram-design/

## 문서의 목적

AI 코딩 도구(Claude Code, Codex 등)에 설치해서 쓰는 다이어그램 제작 스킬 "Diagram Design"의 핵심을 파악하고, 강의 자료와 블로그 도식 제작에 바로 투입할 수 있는 실행 방법을 정리한다.

## 쉬운 설명

Diagram Design은 Claude Code 같은 AI 코딩 도구에 끼워 넣는 확장 기능(스킬)이다. "우리 서비스 구조도 그려줘"라고 말로 시키면, 결과물로 HTML 파일 한 개를 만들어 준다. 그 파일에는 그림이 SVG 코드로 직접 들어있어서, 인터넷 없이 더블클릭만 해도 브라우저에서 열린다. 별도 프로그램 설치나 빌드 과정이 필요 없다.

그릴 수 있는 그림 종류는 39가지다. 구조도(Architecture), 순서도(Flowchart), 타임라인, 간트차트, 조직도, 벤다이어그램, 칸반, 사용자 여정, 산키(Sankey, 양이 갈라지고 합쳐지는 흐름도), 피시본(Fishbone, 원인 분석도) 등이 들어있다. 각 종류마다 밝은 배경, 어두운 배경, 잡지풍 편집 디자인 이렇게 3가지 버전이 함께 제공된다.

가장 눈에 띄는 기능은 브랜드 자동 적용이다. "내 사이트 주소로 온보딩해줘"라고 요청하면 그 사이트의 첫 화면을 읽어서 배경색, 글자색, 강조색, 글꼴을 뽑아낸 뒤 모든 다이어그램에 똑같이 입힌다. 작업 시간은 약 60초로 소개된다. 색을 적용하기 전에 글자와 배경의 명암 대비(WCAG AA 기준)를 자동 검사해서, 9~12px 크기에서 읽기 힘든 색이면 대안을 제안한다.

디자인 규칙도 고정되어 있다. 강조색은 1개만 쓰고, 시선이 먼저 가야 할 요소는 1~2개로 제한하며, 모든 좌표와 간격을 4의 배수로 맞춘다. 그림자는 쓰지 않는다. 기존에 draw.io나 Mermaid로 그려둔 파일이 있으면 그대로 변환하는 것이 아니라 이 디자인 규칙에 맞춰 다시 그려준다. 완성본은 PNG나 SVG로 내보낼 수 있다.

## 활용 방법

가장 쉬운 진입 경로는 Claude Code에 플러그인으로 설치하는 것이다. 설치와 사용은 세 단계로 끝난다.

**1단계. 설치**

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

설치 후 `/plugin`을 다시 열어 Marketplaces에서 diagram-design을 선택하고 자동 업데이트를 켠다. Claude Code는 외부 마켓플레이스의 자동 업데이트를 기본으로 꺼두기 때문에 이 과정을 한 번 거쳐야 한다.

**2단계. 브랜드 입히기**

설치 직후 첫 다이어그램을 요청하면 스킬이 스스로 멈추고 "기본 스타일 그대로 쓸지, 온보딩할지" 묻는다. 여기서 아래처럼 지시한다.

```
onboard diagram-design to https://davi.kr
```

추출 결과를 제안 형태로 보여주면 승인한다. 이후 모든 다이어그램이 같은 색과 글꼴로 나온다. 고객사나 기관별로 색이 다르다면 프로필로 저장한 뒤, 프로젝트 폴더에 `.diagram-design` 파일을 만들고 `profile: 이름`을 적어두면 폴더마다 다른 브랜드가 적용된다.

**3단계. 자연어로 요청**

```
우리 수업 흐름을 순서도로 그려줘. 사전과제, 이론 3차시, 실습 5차시, 발표
2분기 프로젝트를 임팩트 대 난이도 사분면으로 그려줘
이 Mermaid 블록을 슬라이드용으로 다시 그려줘
```

PNG로 뽑을 때는 `/diagram-design:export-diagram 파일경로.html --png-only --scale=3`을 쓴다. 사전에 `pip install playwright && playwright install chromium`을 한 번 실행해 두어야 한다.

내보내기 옵션 중 size 값을 활용하면 용도에 맞는 판형이 나온다. 슬라이드는 `slide-16x9`, 블로그 본문은 `doc-inline`, 썸네일은 `social-og`를 지정한다. 상세도는 faithful(노드 24개 이하), balanced(12개 이하), simplified(7개 이하) 중에서 고른다. 강의 슬라이드는 simplified, 교안 부록은 faithful이 맞는다.

## 전체 내용에 대한 전문가 의견(사실 기반)

**검증된 강점**

정보 밀도 통제가 명시적 규칙으로 들어가 있다는 점이 실무적으로 가장 큰 차이다. 목표 밀도 4/10, 강조 요소 1~2개, 4px 격자 정렬은 AI 생성 도식이 지저분해지는 주된 원인을 직접 겨냥한다. 일반 프롬프트로 다이어그램을 요청했을 때 매번 결과가 달라지는 문제를 규칙 파일로 고정한 구조다.

점진적 로딩(progressive disclosure) 설계도 실제로 의미가 있다. 39종 전체 명세를 컨텍스트에 올리지 않고 요청된 한 종류의 참조 파일만 읽는다. 순서도를 요청하면 SKILL.md와 type-flowchart.md만 로드된다. 스킬 제작을 가르치는 입장에서는 이 구조 자체가 좋은 교보재다.

CI 검증 강도가 오픈소스 스킬 치고 이례적으로 높다. 라벨이 다른 노드에 가려지는지 기하학적으로 검사하고, 트리맵은 면적 비율과 표기 수치가 일치하는지 검사하며, 헤드리스 크로미움으로 실제 렌더링 결과까지 확인한다. 유지보수 신뢰도를 판단할 근거가 된다.

**한계와 주의점**

첫째, 한글 렌더링 검증 자료가 없다. 기본 글꼴은 Instrument Serif, Geist, Geist Mono 세 가지로 모두 라틴 문자 중심이다. 한글은 대체 글꼴로 빠지며, 이때 글자 폭이 달라져 노드 밖으로 넘칠 수 있다. README도 "네트워크 차단 상태의 폰트 측정값은 독자가 보는 것과 다르다"고 명시한다. 한국어 강의 자료에 쓰려면 style-guide.md에서 Pretendard 같은 한글 글꼴로 바꾼 뒤 `lint-render.py --fonts`로 실제 렌더링을 직접 확인해야 한다. 이 검증은 사용자 몫이다.

둘째, CLI 전용이다. Claude Code, Codex, Factory Droid, Pi 같은 도구가 전제다. 웹 클로드 대화창에서는 쓸 수 없다. 비개발자 대상 강의에 넣으려면 설치 단계부터 별도 시간 배정이 필요하다.

셋째, 숫자 표기에 불일치가 있다. 저장소 상단 About 설명은 38종, README 본문은 39종으로 적혀 있다. 본문과 실제 타입 목록이 39개이므로 39종이 맞는 값으로 보이나, 소개 자료에 인용할 때는 확인 시점을 함께 적는 편이 안전하다.

넷째, 60초 브랜드 적용은 제작자 주장이며 제3자 검증치가 아니다. 사이트 구조에 따라 추출 정확도가 달라질 수 있다.

**Bottom Line**

Claude Code를 이미 쓰고 있다면 지금 바로 두 줄 명령으로 설치하고, davi.kr 주소로 온보딩을 돌려 첫 다이어그램을 뽑아 보시기 바랍니다. 그다음 한글 글꼴로 style-guide.md를 교체하고 렌더링 검사를 실행해, 한글이 깨지지 않는 자기 프리셋을 오늘 안에 확정하십시오. 그 프리셋 하나가 앞으로 만드는 모든 교안 도식의 제작 시간을 줄여 줍니다.

---

정리: 다비(davi.kr) | https://davi.kr/