Diagram Design: 설명만으로 HTML·SVG 다이어그램을 그리는 스킬
AI 코딩 도구에 설명을 주면 발표·문서용 다이어그램을 HTML·SVG 파일로 그려 주는 디자인 스킬이에요.
주요 기능
- 아키텍처·흐름도·시퀀스·데이터 모델 등 45개 시각 유형과 밝은색·어두운색·편집형 예제를 제공한다.
- 설명이나 기존 Mermaid·draw.io·Excalidraw 자료를 입력받아 새 HTML/SVG로 다시 그리는 작업을 안내한다.
- 웹사이트나 로컬 디자인 자료에서 색상·글꼴을 정하고 프로필로 재사용할 수 있다.
- SVG 추출 및 Playwright 기반 PNG 변환 도구가 포함된다. PNG는 기본 2배 크기이며 전체 페이지가 아닌 도표 SVG 영역이 대상이다.
구조
독립 웹 서비스가 아니라 SKILL.md, 유형별 참고 자료, HTML 예제, 명령 템플릿과 소규모 Python 스크립트로 구성된다. Codex 플러그인 매니페스트는 동일한 skills/ 디렉터리를 읽으며 버전은 2.6.136이다. AI 에이전트가 배치와 SVG를 작성하고, 결과물은 브라우저에서 여는 단일 HTML이다. PNG 구현은 Python Playwright가 Chromium을 열어 SVG를 캡처한다.
누구에게 쓸모 있나요
블로그·발표·기획 문서에 브랜드 스타일을 맞춘 그림이 필요한 기획자·개발자. 매번 Git 변경 내용을 텍스트로 비교하거나 마우스로 노드를 편집하는 용도에는 덜 적합하다.
설치 전 준비
Agent Skills를 읽는 AI 도구와 해당 도구의 사용 권한이 필요하다. 범용 설치 명령은 Node.js/npm의 npx와 GitHub 접근을 사용한다. HTML 열람은 최신 브라우저면 되며 서버 빌드 과정이 필요 없다. PNG 내보내기는 Python·Playwright·Chromium이 별도로 필요하다. 정확한 Node/Python 최소 버전은 본 분석에서 확인하지 못했다.
- Claude Code·Codex·Cursor·Copilot 등 Agent Skills 호스트(지원 방식은 README별 상이)
- 결과 HTML: 일반 데스크톱/모바일 브라우저
- 저장소 CI는 Linux·Windows·macOS를 대상으로 한다고 문서에 기재되나 본 분석에서 실행하지 않음
설치 방법
- 문서상 범용 설치 예시: npx skills add cathrynlavery/diagram-design — 사용할 에이전트와 설치 범위를 선택한다. 이번 작업에서는 실행하지 않았다.
- Codex에서는 README의 네이티브 마켓플레이스 방법을 선택할 수 있다. 기존 독립 스킬 복사본과 중복 설치하지 않고 새 세션에서 로딩 여부를 확인한다.
- 처음 사용하는 프로젝트에서는 브랜드 색상·글꼴을 정하거나 기본 디자인 사용을 명시한다. 프로필을 저장하면 다음 작업에 재사용한다.
- PNG가 필요할 때만 README Export 절의 Python Playwright·Chromium 준비 절차를 별도로 적용한다. HTML·SVG 열람에 이 준비가 항상 필요한 것은 아니다.
사용 방법
- 에이전트에 ‘웹 프런트엔드, API, Redis, DB의 관계를 아키텍처 그림으로 그려줘’처럼 목적·연결·강조점을 설명한다.
- 출력된 HTML을 브라우저로 열어 글자 잘림·화살표·논리 관계를 검토하고 수정할 부분을 다시 요청한다.
- 필요하면 ‘이 그림을 SVG와 PNG로 내보내줘’라고 요청한다. 전체 편집형 페이지 보존은 브라우저 인쇄/PDF 또는 전체 페이지 캡처 방식이 별도다.
- 오프라인 사용 시 Google Fonts 링크를 제거하거나 SVG 내보내기에서 시스템 글꼴 옵션을 사용하고, 대체 글꼴로 인한 배치 변화를 확인한다.
비용과 API 키
스킬 자체에 계정·서버·결제 기능이 없고 별도 전용 API 키도 요구하지 않는다. 사용하는 AI 도구의 구독·모델 API 비용은 별도이며 PNG 도구 설치와 저장 공간이 필요할 수 있다. 자체 무과금이 AI 서비스 무료 사용을 뜻하지 않는다.
라이선스
LICENSE 원문은 MIT. 재배포 시 저작권·허가 고지를 유지해야 한다. THIRD_PARTY_LICENSES에는 아이콘의 MIT/CC0, 로고에 사용한 글꼴의 SIL OFL 등 별도 출처가 명시되어 있으며 브랜드 상표권은 별개다.
주의사항과 알려진 이슈
- 생성 품질과 배치는 모델에 의존하며 같은 설명도 다른 그림을 만들 수 있다. 도표가 사실을 검증해 주는 것은 아니므로 관계·수치를 원자료와 대조해야 한다.
- WYSIWYG 편집기나 왕복 편집 포맷이 아니다. 노드 이동은 에이전트 요청 또는 SVG 수정이 필요하고, Git에서 지속 변경하는 문서는 Mermaid가 더 관리하기 쉬울 수 있다.
- 자체 서버·분석 수집이 없다는 PRIVACY 설명과 별개로 프롬프트/파일은 AI 제공자가 처리한다. 생성 HTML과 SVG는 기본적으로 Google Fonts에 요청하여 보는 사람의 IP 등 HTTP 정보가 전달될 수 있다.
- 관리되는 설치 경로의 스타일 파일을 직접 고치면 업데이트로 덮일 수 있다. 저장 프로필을 사용하는 편이 보존에 유리하다.
#493 노드·연결선 수동 이동 기능 요청
열린 사용자 요청은 생성 배치가 만족스럽지 않을 때 직접 조절하기 어렵다는 한계를 보여 준다. 모든 출력에서 재현한 결함은 아니다.
#487 box-plot 검증기가 놓치는 숨김·색상 표현
열린 보고서에 CSS로 숨긴 라벨 등 검증 누락 사례가 있다. 자동 검사 통과만으로 시각적 정확성을 보장할 수 없다.
확인 범위
확인 날짜: 2026-10-29
확인한 범위: 공식 GitHub의 지정 커밋 README·매니페스트·주요 구현/안전 문서·라이선스와 릴리스/열린 이슈를 읽은 정적 분석. 설치·실행·로그인·API 호출은 하지 않음.
확인 한계: 아래 설치·사용 절차는 공식 문서에 기재된 방법을 재정리한 것이며 직접 실행 검증 결과가 아님. 모든 OS·모델·브라우저 조합, 전체 의존성 보안, 모든 이슈를 검증하지 않음. 릴리스 API의 최근 목록은 빈 배열이었고 버전은 플러그인 매니페스트로 확인했다.
확인 커밋: 0cf73c3fcc56667ad91a9a04c439ac6ccfabc9d1