Diagram Design의 개요
Diagram Design은 Cathryn Lavery가 자신의 회사 LittleMight 이름으로 공개한 에이전트 스킬로, 일상 언어로 한 요청을 인라인 SVG가 담긴 HTML 파일 하나짜리 다이어그램으로 바꿉니다. 아키텍처, 플로차트, 시퀀스, 상태 다이어그램부터 사분면, 트리맵, 분해 액소노메트릭 도면까지 45가지 유형을 다루며, 각각 minimal light, minimal dark, full-editorial 변형이 있습니다. 하우스 스타일은 고정되어 있습니다. 1px 가는 선, 그림자 없음, 중요한 한두 가지에만 쓰는 강조색 하나, 모든 좌표는 4px 격자 위에 있습니다.
웹사이트에 온보딩하라고 하면 에이전트가 홈페이지를 가져와 색상 팔레트와 글꼴 스택을 추출하고, WCAG AA 대비를 확인한 뒤, 이후 모든 다이어그램이 읽는 스타일 가이드에 토큰을 기록합니다. 이름을 붙인 프로필로 여러 고객의 브랜드를 구분합니다. 기존 draw.io, Mermaid, Excalidraw 파일을 다시 그리기도 하며, Figma용 SVG나 슬라이드용 PNG로 내보냅니다.
`npx skills add cathrynlavery/diagram-design`로 아무 Agent Skills 호스트에나 설치하거나, Claude Code, Codex, GitHub Copilot, Factory Droid, Qoder, Pi, Claude Cowork용 플러그인으로 설치합니다.
Diagram Design, 쓸 만한 가치가 있습니까?
Diagram Design은 출판할 다이어그램이라면 가장 먼저 꼽을 스킬이며, 그 이유는 기능 목록보다 갤러리에서 드러납니다. 저장소는 2026년 4월에 만들어졌고 GitHub 스타는 약 62,200개입니다. skills.sh는 CLI 를 통한 설치를 21,200건으로 집계하며, 여기에는 플러그인 마켓플레이스가 빠져 있습니다. 태그가 붙은 릴리스는 없지만 매일 관리되며, 플러그인 매니페스트는 2026년 10월 27일에 버전 2.6.136에 이르렀습니다.
일을 하는 것은 디자인 규칙입니다. Lavery의 전제는 모델이 내용은 이미 이해하고 있고 안목만 부족하다는 것이므로, 스킬이 그 안목을 글로 적어 둡니다. 목표 밀도 10점 중 4, 따로 남겨 둔 강조색, 4px 격자이며, 요소가 겹치거나 잘리는지 CI로 검사합니다. 브랜드 온보딩은 생각보다 중요합니다. 이후 모든 다이어그램이 사이트의 배경, 행동 유도 색상, 글꼴을 쓰며, 브랜드 색상이 9~12px 라벨 크기에서 대비 검사를 통과하지 못하면 더 어두운 값을 제안합니다.
가져오기 명령은 오래된 다이어그램이 있는 팀에게 실질적인 이득입니다. draw.io, Mermaid, Excalidraw 파일을 세 가지 상세 수준(faithful은 노드 24개까지, balanced는 12개까지, simplified는 7개까지) 중 하나로 다시 그리고, 가져오기마다 무엇을 합치거나 뺐는지 기록한 장부를 남깁니다. README는 비용에 대해 솔직합니다. 결과는 모델에 따라 달라지고, 같은 프롬프트도 두 번 다르게 배치될 수 있으며, 풀 리퀘스트에서 검토할 편집 가능한 소스가 없습니다. 스프린트마다 바뀌는 아키텍처 문서에는 README 스스로 말하듯 여전히 Mermaid가 더 나은 도구입니다.
일부 마찰은 설계에 들어 있습니다. 첫 실행 게이트가 새 프로젝트마다 멈추고 온보딩 여부를 묻는데, 사람에게는 맞지만 무인 실행을 막습니다(이슈 #262가 우회 방법을 제안합니다). PNG 내보내기에는 Playwright와 Chromium이 필요하고, 다이어그램은 시스템 글꼴을 요청하지 않는 한 기본으로 Google Fonts에서 글꼴을 불러오며, 이것이 유일한 네트워크 요청입니다. 기술 아키텍처 다이어그램을 겨냥한 fireworks-tech-graph와 비교하면 Diagram Design은 훨씬 많은 유형을 다루고 브랜드를 입힙니다. anatomy는 단일한 아이소메트릭 인터랙티브 형식을 더 깊이 다룹니다.
제 역할을 하는 곳
매주 회사 블로그를 쓰는 창업자
평범한 둥근 상자 대신 사이트의 나머지 부분과 어울리는 다이어그램을 글에 넣기
블로그 URL로 온보딩을 한 번 실행한 뒤, 글마다 사분면이나 피라미드를 요청하고 HTML이나 내보낸 SVG를 삽입합니다. 비용은 모델 토큰뿐이며, Lavery가 말하는 30분짜리 Figma 작업을 대신합니다.
여러 고객을 상대하는 컨설팅사의 솔루션 아키텍트
고객마다 오래된 draw.io 다이어그램을 그 고객의 색상으로 된 슬라이드로 바꾸기
고객별 프로필을 저장하고 각 프로젝트에 `.diagram-design` 마커를 둔 뒤 `/diagram-design:import-drawio file.drawio --size=slide-16x9 --detail=simplified --audience=executive`를 실행합니다. 충실도 장부에 무엇이 축약되었는지 나오므로, 고객에게 보이기 전에 확인할 만합니다.
엔지니어링 핸드북에 시스템을 문서화하는 플랫폼팀 리드
공개 핸드북 페이지에 쓸 다듬어진 아키텍처 다이어그램 만들기
일상 언어로 아키텍처나 시퀀스 다이어그램을 요청하고 `/export-diagram --svg-only`로 SVG를 내보냅니다. 팀이 스프린트마다 고치는 다이어그램은 Mermaid 소스로 유지합니다. 다시 생성하면 배치가 바뀔 수 있고 diff할 대상이 없습니다.
도입 전 확인할 점
- 설정
- 아무 Agent Skills 호스트에서 `npx skills add cathrynlavery/diagram-design`을 실행하거나, Claude Code에서 슬래시 명령과 업데이트를 위해 `/plugin marketplace add cathrynlavery/diagram-design` 다음 `/plugin install diagram-design@diagram-design`을 실행합니다. PNG 내보내기에는 `pip install playwright && playwright install chromium`이 필요합니다.
- 연동
- Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Qoder, Pi, Gemini CLI, Cline, Windsurf, Amp, Kiro, OpenCode, Claude Cowork. draw.io, Mermaid, Excalidraw를 가져오고, HTML, SVG, PNG를 슬라이드, 문서, 소셜, 인쇄 크기로 내보냅니다.
- 데이터와 개인정보
- 개인정보 처리방침에 따르면 서버, 계정, 분석, 텔레메트리가 없습니다. 생성된 파일은 기본으로 Google Fonts를 불러오므로 보는 사람의 IP 주소가 Google로 전송됩니다. 시스템 글꼴 옵션을 쓰면 모 든 네트워크 요청이 사라집니다. 브랜드 온보딩은 지정한 사이트만 가져옵니다. MIT 라이선스.
- 대규모 사용 시 비용
- 팀 규모와 관계없이 무료입니다. 비용은 다이어그램과 다시 그리기마다 드는 모델 토큰이며, 이를 표준으로 삼는 팀은 이미 가진 에이전트 좌석 외에 추가 비용이 없습니다.
- 제한
- 열린 이슈와 풀 리퀘스트 약 45개로, 대부분 새 다이어그램 유형과 Mermaid 가져오기 및 레이아웃 검증기 수정입니다. 결과 품질은 모델에 좌우되며, 설치된 스타일 가이드를 고친 내용은 저장된 프로필이나 편집 가능한 클론을 쓰지 않으면 업데이트로 덮어쓰일 수 있습니다.
좋은 점
- 일관된 편집 스타일의 45가지 다이어그램 유형
- 웹사이트에서 팔레트 와 글꼴을 가져오고 대비를 검사
- draw.io, Mermaid, Excalidraw 파일을 다시 그림
- 접근성 있는 SVG를 담은 독립형 HTML, MIT 라이선스
아쉬운 점
- diff하거나 끌어서 고칠 편집 가능한 소스가 없음
- 같은 프롬프트가 다른 배치를 만들 수 있음
- 첫 실행 스타일 게이트가 무인 실행을 중단시킴
- PNG 내보내기에 Playwright와 Chromium 필요
추천 대상
글, 발표 자료, 문서에 다이어그램을 싣고 브랜드와 맞추고 싶은 작가, 창업자, 엔지니어.
Diagram Design 대안
Diagram Design: 자주 묻는 질문
- Diagram Design, 쓸 만한 가치가 있습니까?
- Diagram Design은 에이전트에게 부족한 안목을 채워 주며, 그 다이어그램은 생성된 것이 아니라 출판된 것처럼 보입니다. 대가는 diff하거나 끌어서 고칠 수 없는 결과물입니다. 평점은 5점 만점에 4.3점입니다.
- Diagram Design의 가격은 얼마입니까?
- MIT의 무료 오픈소스입니다. 에이전트의 모델 사용료만 냅니다.
- Diagram Design의 단점은 무엇입니까?
- diff하거나 끌어서 고칠 편집 가능한 소스가 없음; 같은 프롬프트가 다른 배치를 만들 수 있음; 첫 실행 스타일 게이트가 무인 실행을 중단시킴; PNG 내보내기에 Playwright와 Chromium 필요.
- Diagram Design에 적합한 사람은 누구입니까?
- 글, 발표 자료, 문서에 다이어그램을 싣고 브랜드와 맞추고 싶은 작가, 창업자, 엔지니어.
- 팀이나 프로덕션 환경에서 Diagram Design의 비용은 얼마입니까?
- 팀 규모와 관계없이 무료입니다. 비용은 다이어그램과 다시 그리기마다 드는 모델 토큰이며, 이를 표준으로 삼는 팀은 이미 가진 에이전트 좌석 외에 추가 비용이 없습니다.
- Diagram Design에 회사 데이터를 맡겨도 안전합니까?
- 개인정보 처리방침에 따르면 서버, 계정, 분석, 텔레메트리가 없습니다. 생성된 파일은 기본으로 Google Fonts를 불러오므로 보는 사람의 IP 주소가 Google로 전송됩니다. 시스템 글꼴 옵션을 쓰면 모든 네트워크 요청이 사라집니다. 브랜드 온보딩은 지정한 사이트만 가져옵니다. MIT 라이선스.
- Diagram Design의 가장 좋은 대안은 무엇입니까?
- 저희가 리뷰한 것 중 가장 가까운 대안은 fireworks-tech-graph, Anatomy 및 Anthropic Skills입니다.
답변 확인일: 2026년 10월 28일.
Diagram Design 개발사입니까? 이 평점을 사이트에 표시하십시오
