말로 시키면 그림 45종, 에이전트 스킬 diagram-design
블로그 글에 그림 하나 넣으려고 AI에 "구조도 좀 그려 줘"라고 해 본 적이 있다. 결과는 늘 비슷했다. 둥근 상자가 잔뜩 있고, 화살표는 환승역 많은 지하철 노선도처럼 얽혀 있고, 색은 서너 가지가 사이좋게 다투고 있었다. 내용은 맞다. 그런데 글에 넣으려고 하면 손이 멈췄다.
이번 주 GitHub 주간 트렌딩 6위에 오른 diagram-design이 딱 이 지점을 건드린다. Cathryn Lavery(LittleMight)가 만든 에이전트 스킬이다. 한 주에 별 7,901개가 붙었고, 누적 별은 57,869개다(2026-10-19 확인). 라이선스는 MIT다. 기능 목록도 길지만 내 눈에 먼저 들어온 건 접근 방식이었다. 모델은 내용을 이미 안다. 모자란 건 취향이다.
무엇을 하는 도구인가
평소 말투로 그림을 시키면 에이전트가 그림 종류를 고르고, 어떻게 그릴지 계획을 말한 뒤 .html 파일 하나를 쓴다. 그 안에 SVG가 들어 있어서 더블클릭하면 바로 브라우저에서 열린다. 빌드도, 자바스크립트도, 외부 이미지도 필요 없다. 파일 하나로 끝이다.
README 기준으로 그림은 45종이고, 종류마다 모양이 세 가지(밝은 미니멀, 어두운 미니멀, 풀 에디토리얼)씩 있다. 구조도, 순서도, 시퀀스, 상태 기계, ER, 타임라인, 스윔레인, 4분면, 레이더, 플라이휠, 조직도, 벤, 피라미드, 간트, 생키, 피시본, 워들리 맵, 사용자 여정까지 들어 있다. 이름만 읊어도 숨이 차다. 참고로 저장소 설명과 CHANGELOG 2.6(2026-08-20)에는 44종으로 적혀 있다. 7월 14일 2.0이 12종으로 출발했으니, 두 달 만에 꽤 빠르게 불어난 셈이다.
써 보는 법
설치는 한 줄이다. Cursor, Claude Code, Codex, GitHub Copilot, Gemini CLI, Cline, Windsurf 같은 에이전트 스킬 호스트라면 어디서든 돌아간다.
npx skills add cathrynlavery/diagram-design
Claude Code라면 플러그인 마켓플레이스로 까는 편이 낫다. 업데이트와 슬래시 명령이 덤으로 따라온다.
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
그다음은 말로 시키면 된다. README 예시를 우리말로 옮기면 이런 식이다.
- "프런트엔드, 백엔드, DB, Redis 캐시로 내 앱 구조도를 그려 줘."
- "2분기 프로젝트를 영향도 대 노력 4분면에 놓아 줘."
- "401이 나면 토큰을 갱신하는 bearer 호출 시퀀스를 그려 줘."
내 사이트와 톤을 맞추고 싶으면 "Onboard diagram-design to https://yoursite.com"이라고 하면 된다. 사이트 첫 화면에서 주요 색과 글꼴을 뽑아 paper · ink · muted · accent · link 역할에 나눠 담고, 무엇이 바뀌는지 먼저 보여 준 다음 저장한다. 글자와 배경의 대비가 WCAG AA 기준을 넘는지도 알아서 검사해 준다. Mermaid, draw.io, Excalidraw 파일을 이 스타일로 다시 그리는 기능도 있고, 내보낼 때는 SVG와 PNG 중에 고르면 된다.
핵심은 '적어 둔 취향'
만든 이가 밝힌 동기는 꽤 공감이 간다. 자기 블로그에 넣을 그림을 Claude에 시키면 흔한 둥근 상자 그림만 나와서, Figma와 30분을 씨름하거나 아예 그림을 빼야 했다고 한다. 거기서 내린 진단이 이것이다.
"The model already understood the content. What it was missing was taste." — README
그래서 취향을 규칙으로 못 박았다.
- 강조색은 하나만 쓰고, 독자가 먼저 볼 1~2곳에만 칠한다.
- 선은 1px 실선이고 그림자는 없다. 모서리 둥글기는 최대 10px다.
- 모든 좌표, 너비, 간격은 4px 격자에 맞춘다.
- 밀도 목표는 4/10이다. "The highest-quality move is usually deletion."
4px 격자를 식으로 쓰면 허무할 만큼 단순하다. 어떤 좌표 x든 가장 가까운 4의 배수로 반올림한다.
x' = 4 × ⌊x ÷ 4 + 0.5⌋ (예: x = 29면 ⌊7.75⌋ = 7이라 x' = 28)
이것만 지켜도 상자끼리 1~2px씩 어긋나서 생기는 "어딘가 엉성한 느낌"이 사라진다. 탭과 스페이스가 섞인 코드처럼, 왜 거슬리는지는 몰라도 보는 사람은 다 느끼는 그 느낌 말이다. 아래는 이 규칙대로 손으로 써 본 SVG 조각이다. 스킬이 실제로 내놓는 결과물이 아니라 규칙을 보여 주려고 만든 예시이고, 직접 돌려 보지는 않았다.
<!-- 예시: 좌표와 크기가 모두 4의 배수, 1px 선, 그림자 없음, 강조색은 한 곳만 -->
<svg width="400" height="120" xmlns="http://www.w3.org/2000/svg">
<rect x="16" y="40" width="104" height="40" rx="8" fill="none" stroke="#1a1a1a" stroke-width="1"/>
<rect x="148" y="40" width="104" height="40" rx="8" fill="none" stroke="#bf4520" stroke-width="1"/>
<rect x="280" y="40" width="104" height="40" rx="8" fill="none" stroke="#1a1a1a" stroke-width="1"/>
<line x1="120" y1="60" x2="148" y2="60" stroke="#1a1a1a" stroke-width="1"/>
<line x1="252" y1="60" x2="280" y2="60" stroke="#1a1a1a" stroke-width="1"/>
</svg>
개발자 눈으로 정리하면 이 스킬은 프롬프트에 붙는 스타일 가이드다. 모델을 바꾸지도, 렌더러를 새로 만들지도 않았다. "하지 말 것"을 구체적인 숫자로 적어 두고 모델이 그 울타리 안에서만 움직이게 했을 뿐이다. 격자 · 겹침 · 잘림은 저장소 CI가 따로 검사하고, 만든 그림은 함께 든 self_check.py로 다시 점검해 볼 수 있다.
다른 도구와 견주면
| Mermaid · PlantUML | draw.io · Excalidraw | Diagram Design | |
|---|---|---|---|
| 만드는 법 | 텍스트로 쓴다 | 손으로 끌어다 놓는다 | 에이전트에게 말한다 |
| 배치 | 자동 | 손으로 | 에이전트가 4px 격자에 놓는다 |
| 결과물 | GitHub에서 그려지는 텍스트 | 편집 가능한 원본 파일 | HTML 파일 하나(SVG · PNG로 내보내기) |
| 고칠 때 | 텍스트를 고친다 | 캔버스를 고친다 | 다시 시키거나 SVG를 고친다 |
만든 이가 단점까지 솔직하게 적어 둔 점은 마음에 든다. 결과물 품질은 함께 쓰는 모델에 따라 달라지고, 같은 프롬프트라도 두 번 돌리면 배치가 다르게 나올 수 있다. 편집 가능한 원본 형식이 아니라서 PR에서 diff를 볼 수도 없다. 깃에 두고 스프린트마다 손보는 문서라면 README도 "Mermaid is still the better fit"이라고 말한다. 이 도구의 자리는 밖에 내보낼 그림이다.
내 생각: 실무에 주는 의미
나라면 이렇게 나눠 쓰겠다. 레포 안의 설계 문서는 계속 Mermaid로 쓰고, 블로그 · 발표 자료 · 보고서처럼 한 번 내보내고 끝나는 그림은 이 스킬에 맡긴다. 둘은 경쟁 관계라기보다 앉는 자리가 다르다.
정작 더 크게 와닿은 건 방법론이다. AI 결과물이 밋밋하면 우리는 보통 더 좋은 모델부터 찾는다. 이 저장소는 다른 답을 내민다. 취향을 문장과 숫자로 적어 두면 같은 모델로도 결과가 달라진다는 것이다. 사내 문서 톤, 코드 리뷰 기준, 슬라이드 양식처럼 "우리 팀다운 모양"이 있는 일이라면 이 방식을 그대로 가져다 써도 된다.
보안 쪽에서 짚을 것도 있다. PRIVACY.md에 따르면 스킬 자체는 아무것도 밖으로 보내지 않고, LittleMight에는 서버도 없다. 다만 프롬프트는 쓰는 AI 회사로 가고, 그림을 브라우저에서 열면 Google Fonts에 요청이 가서 보는 사람의 IP가 Google에 전달된다. 브랜드 맞추기를 하면 그 사이트에도 방문 요청이 간다. 사내망 문서에 쓸 생각이라면 이 부분은 알고 쓰는 게 좋다. 그리고 공식 빌드는 이 저장소에서만 나온다. 다른 이름으로 올라온 목록은 비공식 복제본이니, 설치할 때 주소를 꼭 확인하자.
정리
- diagram-design은 말로 시키면 HTML + SVG 파일 하나로 그림을 그려 주는 에이전트 스킬이다. README 기준 45종이고, 별은 5.8만 개다.
- 비결은 새 모델이 아니라 적어 둔 취향이다. 강조색 하나, 1px 선, 4px 격자, 밀도 4/10.
- 내보낼 그림에는 잘 맞는다. 깃에서 계속 고치는 문서에는 여전히 Mermaid가 낫다.
- "AI가 밋밋하다"는 불만은 규칙을 적어 두는 것만으로도 꽤 많이 풀린다.