GitHub 요즘 뜨는직접 실행 · 11회 성공

diagram-design, 직접 돌려 봤습니다

Claude Code에서 10번 넘게 실행한 결과물입니다. 깃허브 트렌딩 이번 주 스타 +7,901

기준: 2026-10-19T13:04:36+00:00 · 증가량은 GitHub 트렌딩 페이지의 이번 주 값

claude-codeclaude-marketplace

cathrynlavery/diagram-design

https://github.com/cathrynlavery/diagram-design · ⭐ 58,148 · 트렌딩 이번 주 +7,901

말로 설명하면 플로차트, 시퀀스, 간트, 생키 같은 다이어그램을 자체 완결 HTML+SVG 한 파일로 그려 줍니다.

참조 파일까지 쓴 10번(run03~run12)과, 참조 파일 없이 점검 스크립트만 통과한 run02로 나뉩니다. 10번은 모두 점검을 통과했고 한글 라벨도 깨지지 않았습니다. 배달앱 서비스 블루프린트나 AI 에이전트 조직도처럼 칸이 많은 도식도 한 번에 정리됐습니다. 기본 스킨 그대로 쓰면 강조색을 한 군데에만 써서 어떤 도식이든 일관된 인상이 납니다. 갤러리의 키보드 분해도(run06)는 레포에 들어 있는 키보드 예제 코드에 층 하나를 더한 것이라, 순수 신규 생성으로 보지는 마세요.

11회성공 실행
12회전체 실행
163초평균 소요

설치 방법

README 공식 명령 (시험은 --plugin-dir 로컬 로드)

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

필요 조건

처음 쓰는 프로젝트에서는 스타일 가이드가 기본값이면 브랜드를 맞출지 먼저 묻는다. 기본 디자인으로 바로 그리려면 요청에 '기본 스킨 유지(옵션 e)'라고 적는다. README의 npx skills add 경로는 Node가 필요해 시험하지 않았다.

시험할 때 실제로 실행한 명령
# $T = 시험용 작업 폴더(전체 경로는 생략)
git clone --depth 1 https://github.com/cathrynlavery/diagram-design src
claude plugin validate src/.claude-plugin/marketplace.json
claude plugin validate src/.claude-plugin/plugin.json
claude -p "<prompt>" --output-format json --plugin-dir src --permission-mode acceptEdits --allowedTools "Bash(python3:*)" --max-budget-usd 3  (run01-02)
claude -p "<prompt>" --output-format json --plugin-dir $T/src --add-dir $T/src --permission-mode acceptEdits --allowedTools Read Glob Grep "Bash(python3:*)" "Bash(ls:*)" --max-budget-usd 4  (run03-12, 샌드박스 /tmp/gitstar-sandbox/cathrynlavery__diagram-design/runNN)

보안 검토: pass — 훅·MCP 서버 없음. 스킬 스크립트 6개는 로컬 파일 읽기·HTML 검사·SVG/PNG 내보내기만 함. 외부 전송 코드와 자격 증명 접근 없음. 생성 HTML이 Google Fonts를 불러오고, 프로필 저장 시 ~/.diagram-design/profiles/에 씀(요청할 때만). 주의: commands/*.md 6개가 allowed-tools에 범위 제한 없는 Bash를 미리 허용해, 슬래시 명령 사용 시 Bash가 확인 없이 실행될 수 있음(시험에서는 슬래시 명령 미사용).

써 보니

결과물 11개

OAuth 2.0 PKCE 로그인 시퀀스 다이어그램, 미니멀 다크 변형. 4개 라이프라인, 12개 메시지, 이탤릭 주석 1개.
run03 · OAuth 2.0 PKCE 로그인 시퀀스 다이어그램, 미니멀 다크 변형. 4개 라이프라인, 12개 메시지, 이탤릭 주석 1개.Use the diagram-design skill to draw a sequence diagram of an OAuth 2.0 authorization-code login with PKCE between User, Browser app, Auth server, and API. Use the minimal dark variant. Keep the default skin (option e), do not ask questions, and save it as oauth-sequence.html in the current directory.
월 5,000달러 가계 예산 Sankey, 손그림(sketchy) 변형. 수입 2개 → 지출 5개 → 저축 2갈래, 저축→인덱스 펀드 경로만 강조.
run09 · 월 5,000달러 가계 예산 Sankey, 손그림(sketchy) 변형. 수입 2개 → 지출 5개 → 저축 2갈래, 저축→인덱스 펀드 경로만 강조.Use the diagram-design skill to draw a Sankey diagram of a household's monthly budget: 5,000 dollars of income from salary (4,200) and freelance (800) flowing into housing, food, transport, savings, and fun, with savings broken into emergency fund and index funds. Apply the sketchy hand-drawn variant. Keep the default skin (option e), do not ask questions, and save it as budget-sankey.html in the current directory.
배달앱 주문 한 건의 서비스 블루프린트(한국어). 6단계 x 4줄(고객 행동·화면 접점·백오피스·지원 시스템), 가시선 표시, 배차 재매칭 칸 강조.
run10 · 배달앱 주문 한 건의 서비스 블루프린트(한국어). 6단계 x 4줄(고객 행동·화면 접점·백오피스·지원 시스템), 가시선 표시, 배차 재매칭 칸 강조.diagram-design 스킬로 배달앱 주문 한 건의 서비스 블루프린트를 그려 줘. 단계는 메뉴 고르기, 결제, 가게 접수, 조리, 라이더 배차, 배달 완료. 고객 행동, 화면에 보이는 접점, 보이지 않는 백오피스(가게 POS, 배차 알고리즘, 정산), 지원 시스템을 줄로 나누고 가시선(line of visibility)을 표시해 줘. 라벨은 한국어로. 기본 스킨(옵션 e) 그대로, 질문하지 말고 현재 폴더에 delivery-blueprint.html로 저장해 줘.
출판사 편집팀 AI 에이전트 조직도(한국어, full editorial 변형). 편집장 아래 에이전트 4개, 검사 도구 2개, 사람 검토로 가는 에스컬레이션 점선, 요약 카드 3개.
run12 · 출판사 편집팀 AI 에이전트 조직도(한국어, full editorial 변형). 편집장 아래 에이전트 4개, 검사 도구 2개, 사람 검토로 가는 에스컬레이션 점선, 요약 카드 3개.diagram-design 스킬로 작은 출판사 편집팀의 AI 에이전트 조직도를 그려 줘. 편집장(사람)이 맨 위, 그 아래 기획 에이전트·원고 교정 에이전트·디자인 에이전트·마케팅 에이전트, 교정 에이전트 밑에 맞춤법 검사기와 팩트 체커가 있고, 사람 검토로 올라가는 에스컬레이션 경로도 보여 줘. 라벨은 한국어로, 전체 에디토리얼(full editorial) 변형으로 만들고 기본 스킨(옵션 e) 그대로, 질문하지 말고 현재 폴더에 agent-org.html로 저장해 줘.
환불 승인 플로차트. 주문 기간·상품 상태·고객 이력 세 개의 판단 마름모, 전액 환불 경로만 강조색. (이 실행은 스타일 가이드·템플릿 파일 읽기가 막혀, SKILL.md 규칙과 점검 스크립트만 적용됨)
run02 · 환불 승인 플로차트. 주문 기간·상품 상태·고객 이력 세 개의 판단 마름모, 전액 환불 경로만 강조색. (이 실행은 스타일 가이드·템플릿 파일 읽기가 막혀, SKILL.md 규칙과 점검 스크립트만 적용됨)Use the diagram-design skill to draw a flowchart for deciding whether to approve a refund request (order age, item condition, customer history). Keep the default style (option e) and do not ask questions. Save it as refund-flowchart.html in the current directory.
동네 카페 1년 손익 워터폴 차트(한국어 라벨). 매출 120 → 비용 4개 차감 → 영업이익 15(백만 원), 인건비만 강조.
run04 · 동네 카페 1년 손익 워터폴 차트(한국어 라벨). 매출 120 → 비용 4개 차감 → 영업이익 15(백만 원), 인건비만 강조.diagram-design 스킬로 동네 카페 1년 손익을 보여 주는 워터폴 차트를 만들어 줘. 매출 1억 2천만 원에서 원두·재료비 -3,600만, 인건비 -4,200만, 임대료 -1,800만, 기타 -900만을 빼고 영업이익 1,500만 원이 남는 구조야. 라벨은 한국어로, 기본 스킨(옵션 e) 그대로 쓰고 질문하지 말고 현재 폴더에 cafe-waterfall.html로 저장해 줘.
Mermaid 파일(checkout.mmd, 13개 노드·14개 엣지)을 slide-16x9·balanced·executive 설정으로 다시 그린 결제 흐름도. 13개 노드·14개 엣지 → 10개 노드. 입력 파일은 runs/run05/checkout.mmd.
run05 · Mermaid 파일(checkout.mmd, 13개 노드·14개 엣지)을 slide-16x9·balanced·executive 설정으로 다시 그린 결제 흐름도. 13개 노드·14개 엣지 → 10개 노드. 입력 파일은 runs/run05/checkout.mmd.Use the diagram-design skill to import and redraw the Mermaid file checkout.mmd in the current directory. Dials: format html, size slide-16x9, detail balanced, audience executive. Keep the default skin (option e), do not ask questions, report the fidelity ledger, and save the result as checkout-redraw.html in the current directory.
기계식 키보드 6개 층(키캡·스위치·플레이트·PCB·폼·케이스) 분해 축측도. 스킬에 들어 있는 키보드 예제 그리기 코드에 폼 층을 추가해 만듦.
run06 · 기계식 키보드 6개 층(키캡·스위치·플레이트·PCB·폼·케이스) 분해 축측도. 스킬에 들어 있는 키보드 예제 그리기 코드에 폼 층을 추가해 만듦.Use the diagram-design skill to draw an exploded axonometric diagram of a mechanical keyboard pulled apart along one vertical axis: keycaps, switches, plate, PCB, foam, case. Keep the default skin (option e), do not ask questions, and save it as keyboard-exploded.html in the current directory.
서울 3박 4일 여행 간트 차트(한국어). 4일 x 오전·오후·저녁 12칸, 일정 9개를 4개 묶음으로, 경복궁만 강조.
run07 · 서울 3박 4일 여행 간트 차트(한국어). 4일 x 오전·오후·저녁 12칸, 일정 9개를 4개 묶음으로, 경복궁만 강조.diagram-design 스킬로 서울 3박 4일 여행 일정을 간트 차트로 그려 줘. 1일차 인천공항 도착·명동, 2일차 경복궁·북촌·익선동, 3일차 성수동 카페·한강 자전거, 4일차 광장시장 아침·공항 이동. 오전·오후·저녁 구간이 보이게 하고, 라벨은 한국어로. 기본 스킨(옵션 e)을 그대로 쓰고 질문하지 말고 현재 폴더에 seoul-trip.html로 저장해 줘.
노트 앱 기능 아이디어 8개를 영향도 x 개발 공수로 나눈 컨설턴트 스타일 2x2. Quick win 칸 하나만 강조.
run08 · 노트 앱 기능 아이디어 8개를 영향도 x 개발 공수로 나눈 컨설턴트 스타일 2x2. Quick win 칸 하나만 강조.Use the diagram-design skill to make a 2x2 quadrant in the consultant special style: plot 8 product feature ideas for a note-taking app by user impact (y) versus build effort (x), and call out the one quick win. Keep the default skin (option e), do not ask questions, and save it as feature-quadrant.html in the current directory.
차량 호출 운행 상태 머신(lifecycle phase map 패턴)과 단계별 재생 애니메이션. 5개 주 단계, 재시도 대기, 완료·취소 종료 상태. 캡처는 ?motion=static 정지 화면.
run11 · 차량 호출 운행 상태 머신(lifecycle phase map 패턴)과 단계별 재생 애니메이션. 5개 주 단계, 재시도 대기, 완료·취소 종료 상태. 캡처는 ?motion=static 정지 화면.Use the diagram-design skill to draw a state machine for a ride-hailing trip: requested, matching, driver assigned, driver arriving, in trip, completed, cancelled, with guards on each transition and timeout retries for matching. Use the lifecycle phase map pattern if it fits, add step-by-step animation (step mode) that walks through the happy path, and keep the default skin (option e). Do not ask questions; save it as ride-state.html in the current directory.