voidlight00/dptd-harness/kami-svg-diagrams
Claude Code and agent skill by voidlight00/dptd-harness
- community
Checking that the SKILL.md file is still in the repository.
Kami 14종 SVG 다이어그램(Architecture / Flowchart / Bar Chart / Donut Chart / Timeline / Process Flow / Data Comparison / Network Diagram / Gantt Chart / Scatter Plot / Heat Map / Tree Structure / Sankey Diagram / Matrix) 매칭 룰과 인라인 SVG 합성 방법론. kami-diagram-composer 에이전트가 P4 phase에서 사용. 모든 다이어그램은 잉크블루 단일 강조 + 양피지 배경 + 따뜻한 그레이만, 그라데이션·다중 색상·hard drop shadow 금지.
Install
npx vskill@latest install voidlight00/dptd-harness/kami-svg-diagramsSKILL.md
Kami SVG Diagrams
14종 매칭 룰
| 다이어그램 | 본문 트리거 (한국어/영어) | 권장 doc_type | |
|---|---|---|---|
| Architecture | "구조 / 시스템 / 컴포넌트 + 3+ 요소 + 연결" | long-doc, equity-report, landing-page | |
| Flowchart | "단계 / 절차 / 분기 / yes-no 조건" | long-doc, one-pager | |
| Bar Chart | 카테고리별 수치 비교 (3~12개 라벨) | equity-report, long-doc, slides | |
| Donut Chart | 비율 합 100% (≤5 슬라이스) | equity-report, one-pager | |
| Timeline | 날짜+이벤트 (3+) | portfolio, changelog | |
| Process Flow | 입력→처리→출력 (linear) | long-doc, landing-page | |
| Data Comparison | A vs B vs C 표 (행 5+) | equity-report | |
| Network Diagram | 관계 그래프 (5+ 노드) | long-doc, portfolio | |
| Gantt Chart | 스케줄+마일스톤 (기간 명시) | long-doc, portfolio | |
| Scatter Plot | (x,y) 좌표쌍 10+ | equity-report | |
| Heat Map | 2D matrix + 강도 | long-doc, equity-report | |
| Tree Structure | 계층 / org chart | long-doc, portfolio | |
| Sankey Diagram | flow + 양적 변화 | equity-report | |
| Matrix | 2×2 / 3×3 (BCG, SWOT 등) | one-pager, slides |
알고리즘
- 본문 섹션별 트리거 키워드 스캔
- confidence ≥ 0.6 후보만 생성
- 한 섹션당 최대 1개
- 본문에 이미 같은 정보가 표/리스트로 있으면 다이어그램 우선 + 표는 캡션으로 보조
스타일 룰 (모든 SVG 공통)
허용 색상:
#f5f4ed(parchment, 배경)#1B365D(brand, 단일 강조)#E4ECF5(brand-tint-strong, 채움)#141413,#3d3d3a,#504e49,#6b6a64(warm gray scale)#e8e6dc,#e5e3d8(border)
금지:
- 다중 chromatic (red/green/yellow 추가)
<linearGradient>,<radialGradient>filter기반 hard drop shadowfont-style="italic"font-weight="bold"(500 고정, label은 600)rgba(),hsla()
허용 깊이 표현:
- 1pt ring stroke (
stroke="#e8e6dc" stroke-width="1") - 잉크블루 단일 강조 (CTA 영역, primary 노드, primary edge)
- 따뜻한 그레이 스케일로 데이터 위계
폰트
systemfont 우선 (WeasyPrint PDF 외부 fetch 부담 최소화).
diagrams.manifest.json 스키마
안전 룰
- mockup 수치 / 가짜 데이터 절대 금지 — 본문에 실제 데이터 없으면 다이어그램 생성 안 함
- numeric 정확도 유지 + 텍스트 라벨로 정확 값 동반
- 다이어그램 생성 실패 시 silent fallback (원본 표/리스트 유지)
- PDF 1개당 다이어그램 8개 초과 시 conductor에 시각 과부하 경고
- WeasyPrint 호환 인라인 SVG만 (
<img src="...">외부 참조 금지)
Reference
각 14종 다이어그램의 SVG 템플릿 사양은 upstream Kami references/diagrams.md (19,587 byte) 참조. 필요 시 gh api repos/tw93/kami/contents/references/diagrams.md --jq .content | base64 -d 로 fetch.
Security
- Security scanPassed, 95 of 100Pattern checks on the skill's files.
- Model reviewPassed
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckingskills/kami-svg-diagrams/SKILL.md
Popularity
- 7-day trend score
- 5
Not refreshed yet.
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/voidlight00/dptd-harness/kami-svg-diagrams)