Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add Dannykkh/skill-olympus --skill diagram-designgit clone --depth 1 https://github.com/Dannykkh/skill-olympusWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/dannykkh/skill-olympus/diagram-design)<a href="https://agentmods.dev/skills/dannykkh/skill-olympus/diagram-design"><img src="https://agentmods.dev/badge/skills/dannykkh/skill-olympus/diagram-design/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/dannykkh/skill-olympus/diagram-design"><img src="https://agentmods.dev/badge/skills/dannykkh/skill-olympus/diagram-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00173 | $0.02016 |
| Opus 5 | $0.00086 | $0.01008 |
| Sonnet 5 | $0.00035 | $0.00403 |
| Haiku 4.5 | $0.00017 | $0.00202 |
Grade A, and why
diagram-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 105 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Diagram Design (표현 계층)
정본은
.mmd, 렌더링은 여기. Mermaid 자동 레이아웃 대신 에디토리얼 규칙으로 직접 배치한 inline SVG를 생성합니다. upstream cathrynlavery/diagram-design의 부분 vendoring입니다.
역할 경계 (필수 준수)
| 계층 | 소유자 | 산출물 | 용도 |
|---|---|---|---|
| 설계 도면 (정본) | mermaid-diagrams + flow-verifier + zephermine Step 18 | .mmd |
기계 대조(코드 흐름 검증), diff, 파이프라인 |
| 표현 (이 모듈) | diagram-design | self-contained .html (+ 선택 .png) |
사람용 문서·발표·공유 |
- 이 모듈은
.mmd를 읽기만 하고 절대 수정하지 않습니다. flow-verifier 검증 체인의 입력을 바꾸지 않습니다. - Claude 네이티브 경계: Claude에서 Artifact(웹 페이지)로 출력할 다이어그램은 네이티브
artifact-diagramming스킬이 우선입니다. 이 모듈은 (a) 파일 산출물이 필요할 때(clio 문서 삽입, PNG 내보내기), (b) Codex/Antigravity/Grok 등 네이티브가 없는 CLI에서 사용합니다. - 데이터 차트(bar/line/scatter 등 통계 시각화)는
data-visualization스킬 소관입니다. 이 모듈은 구조·흐름·관계 다이어그램만 담당합니다.
Vendored 구성 (부분 이식)
| 파일 | 내용 |
|---|---|
references/core-rules.md |
upstream SKILL.md 원문 — 철학, 커넥터 6규칙(§6), 4px 그리드·복잡도 예산(§7), 산출 전 체크리스트(§9). 그리기 전 반드시 로드 |
references/style-guide.md |
색·타이포 토큰 정본 (paper/ink/muted/accent, Instrument Serif + Geist + Geist Mono) |
references/output-spec.md |
format × size × detail × audience 다이얼, viewBox 프리셋, 타입 램프 |
references/type-*.md |
타입별 레이아웃 규칙 — architecture, flowchart, sequence, er, db-schema, layers (6종) |
references/import-mermaid.md |
Mermaid → IR → 재배치 절차 |
references/export.md |
HTML → SVG/PNG 내보내기 (Playwright) |
scripts/mermaid_extract.py |
.mmd → JSON IR 파서 (표준 라이브러리만, flowchart/sequence/state/ER 지원) |
assets/template.html, assets/template-dark.html |
산출 스캐폴드 |
LICENSE.upstream |
upstream MIT 라이선스 원문 |
미포함 upstream 자산: 나머지 33개 type 레퍼런스, semantic-patterns, animation, primitive-*,
onboarding/profiles, example HTML. 미포함 타입이 필요하면
https://raw.githubusercontent.com/cathrynlavery/diagram-design/main/skills/diagram-design/references/type-{이름}.md
에서 가져와 사용하고, 네트워크가 없으면 해당 타입을 NOT RUN으로 보고합니다.
vendored 6종으로 억지 대체하지 않습니다(폴백 금지).
워크플로우
- 입력 확보
.mmd파일:python scripts/mermaid_extract.py <파일> --json으로 JSON IR 추출 (노드·엣지·깊이·사이클 분석 포함). 이어서references/import-mermaid.md의 재배치 절차 적용.- 자연어 설명: 노드·관계 목록을 먼저 텍스트로 확정한 뒤 진행.
- 타입 선택 — 아래 매핑표에서 선택 후 해당
references/type-*.md로드:
What ships with it
15 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- assets/template-dark.html 3.1 KB
- assets/template.html 3.2 KB
- LICENSE.upstream 1.0 KB
- references/core-rules.md 38 KB
- references/export.md 7.7 KB
- references/import-mermaid.md 8.7 KB
- references/output-spec.md 11 KB
- references/style-guide.md 8.5 KB
- references/type-architecture.md 4.9 KB
- references/type-db-schema.md 4.8 KB
- references/type-er.md 1.5 KB
- references/type-flowchart.md 1.1 KB
- references/type-layers.md 1.5 KB
- references/type-sequence.md 6.5 KB
- scripts/mermaid_extract.py 47 KB runs code
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago First seen · 105 lines · 173 tokens per session scan A d4816076eb32
diagram-design is a skill published in the GitHub repository Dannykkh/skill-olympus (5 stars, last pushed today), licensed MIT. It adds 173 tokens to every session and 2,016 once invoked, about $0.0009 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
capture-pdf
Website-to-PDF capture (all pages + interactive states). Use when: "capture", "pdf", "print", "screenshot", "capture pages".
design-system
Context-aware design intelligence with curated CSV databases for styles, palettes, typography, UX rules, and wow effects. Provides industry-matched color palettes, font pairings, layout patterns, spacing/radius/shadow scales, gradient recipes, micro-animations, and accessibility-safe UX rules. Stack-agnostic — outputs…
polish
Frontend quick wins to wow effects (6 dimensions). Use when: "polish", "beautify", "improve", "wow", "improve design", "enhance", "quick wins".
docs-canvas
Render a documentation-style OpenBitFun Canvas that organizes architecture notes, API references, walkthroughs, runbooks, and how-tos into a navigable layout with sections, tables of contents, diagrams, and cross-references. Use when the user asks for a docs canvas, documentation overview, architecture walkthrough…
draw-io-diagram-generator
Use when creating, editing, or generating draw.io diagram files (.drawio, .drawio.svg, .drawio.png). Covers mxGraph XML authoring, shape libraries, style strings, flowcharts, system architecture, sequence diagrams, ER diagrams, UML class diagrams, network topology, layout strategy, the hediet.vscode-drawio VS Code…
factory-design
Design-system discipline distilled across builds. Semantic token vocabulary (name intent, not palette position), CSS variables bridged into Tailwind, dark/light as a variable swap, single- vs two-layer token systems, component primitives as token consumers, when to promote a repeated utility cluster into a primitive…