AI가 그린 도표가 촌스러웠다면… 말로 시키면 HTML 한 장으로 그려 주는 diagram-design, 도표 45종에 내 사이트 색까지 맞춰요
diagram-design은 코딩 에이전트에 붙이는 도표 그리기 스킬이에요. 흐름도·타임라인·사분면 같은 도표 45종을 파일 하나짜리 HTML + SVG로 그리고, 내 웹사이트의 색과 글꼴을 읽어 와 맞춰 줘요. 라이선스는 MIT예요.
- diagram-design은 에이전트에게 "우리 앱 구조도를 그려 줘"처럼 말하면 도표를 HTML 파일 하나로 써 주는 스킬이에요. 파일을 두 번 눌러 브라우저에서 바로 열 수 있고, 빌드 단계가 없어요.
- 도표는 45종이에요. 구조도 · 흐름도 · 타임라인 · 사분면 · 깔때기 · 막대 · 간트 · 조직도 · 사용자 여정 같은 것들이고, "onboard diagram-design to 내 사이트 주소"라고 하면 사이트의 색과 글꼴을 뽑아 이후 모든 도표에 적용해요.
- 설치는 한 줄(npx skills add cathrynlavery/diagram-design), 라이선스는 MIT예요. 깃허브 별은 10월 13일 23시 기준 53,588개이고, 주간 트렌딩에 '이번 주 별 9,237개'로 올라 있었어요.
글로 풀면 길어지는 내용(작업 순서, 전후 비교, 우선순위)을 타임라인이나 사분면 한 장으로 바꿔 볼 수 있어요. PNG로 내보낼 때 --scale=3을 주면 크게 뽑혀서 카드 한 장으로 쓰기 좋아요.
브랜드 색을 한 번 읽혀 두면 도표마다 색을 다시 맞출 필요가 없어요. SVG로 내보내 Figma나 발표 자료에 넣을 수 있다고 README에 적혀 있어요.
구조도 · 시퀀스 · ER · 배포도처럼 문서에 넣을 도표를 저장소 안에서 HTML로 관리할 수 있어요. draw.io · Mermaid · Excalidraw에서 가져오는 길도 README에 있어요.
설치 3단계 · 값 0원 · 라이선스 MIT · 필요: Claude Code · Codex · Cursor 같은 코딩 에이전트 1) 터미널에서: npx skills add cathrynlavery/diagram-design (Claude Code는 /plugin marketplace add cathrynlavery/diagram-design → /plugin install diagram-design@diagram-design) 2) 색 맞추기: "onboard diagram-design to https://내사이트" → 제안한 색을 보고 "yes, apply it" 3) 그리기: "2분기 프로젝트를 효과와 노력으로 나눈 사분면을 그려 줘" → 나온 .html을 열어 보고 "Export this diagram as SVG and PNG." (PNG 내보내기는 처음 한 번 pip install playwright && playwright install chromium 필요)
설명 글에 넣을 그림이 필요할 때마다 도표를 손으로 그리는 분이라면, 자주 쓰는 틀 하나(예: 작업 순서 타임라인)부터 시켜 보면 좋을 것 같아요. 다만 코딩 에이전트가 있어야 쓸 수 있고, 한글 글꼴이 어떻게 나오는지는 원문에 없어서 첫 장에서 확인이 필요해 보여요.
코딩 에이전트에 붙여 쓰는 도표 스킬 diagram-design이 깃허브 트렌딩에 올라 있어요. README의 첫 문장은 이래요. "An agent skill that draws diagrams as one self-contained HTML + SVG file, in your brand."(도표를 파일 하나짜리 HTML + SVG로, 내 브랜드에 맞춰 그리는 에이전트 스킬.) 이어서 "No shadows. No Mermaid slop."(그림자 없음, 뻔한 Mermaid 그림 없음)이라고 적었어요. Mermaid는 글로 도표를 그리는 널리 쓰이는 도구예요.
쓰는 법은 평소 말로 시키는 것이에요. README의 예는 "프런트엔드·백엔드·데이터베이스·Redis 캐시로 된 우리 앱 구조도를 그려 줘", "2분기 프로젝트를 효과와 노력으로 나눈 사분면이 필요해" 같은 문장이에요. 에이전트가 도표 종류를 고르고 계획을 말한 뒤, 두 번 눌러 열 수 있는 .html 파일 하나를 써요.
눈에 띄는 것은 브랜드 맞추기예요. "onboard diagram-design to https://내 사이트"라고 하면 첫 화면을 읽어 주된 색과 글꼴을 뽑고, 바탕·글자·강조색 같은 역할에 나눠 제안해요. 승인하면 그 뒤의 모든 도표가 그 색으로 나와요. README는 이 과정을 '60초'라고 적었어요.
도표는 45종이고 종류마다 밝은 판, 어두운 판, 편집 디자인 판 세 가지가 있어요. 공식 갤러리에서 전부 볼 수 있어요. 저장소는 10월 13일 23시 33분 기준 별 53,588개, 포크 3,395개이고, 따로 낸 배포 버전은 없어요. 직접 설치해 그려 보지는 않았어요.
