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 mxyhi/ok-skills --skill diagram-designgit clone --depth 1 https://github.com/mxyhi/ok-skillsWrote 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/mxyhi/ok-skills/diagram-design)<a href="https://agentmods.dev/skills/mxyhi/ok-skills/diagram-design"><img src="https://agentmods.dev/badge/skills/mxyhi/ok-skills/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/mxyhi/ok-skills/diagram-design"><img src="https://agentmods.dev/badge/skills/mxyhi/ok-skills/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.00188 | $0.10212 |
| Opus 5 | $0.00094 | $0.05106 |
| Sonnet 5 | $0.00038 | $0.02042 |
| Haiku 4.5 | $0.00019 | $0.01021 |
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 2d 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.
This is a copy
86% identical to diagram-design — 26 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 586 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Diagram Design
Create visual diagrams as self-contained HTML files with inline SVG and CSS, following an opinionated editorial design system.
Thirty-nine visual types. Semantic patterns describe behavior independently; type references describe layout. Details load from references/ only when selected.
0. First-time setup — style guide gate
Before generating your first diagram in a new project, verify the style guide has been customized.
Don't silently ship default-skinned diagrams into a branded project.
First check the project root for a .diagram-design marker and resolve it per references/profiles.md. A valid marker whose profile exists selects that file directly and skips this gate; profile: default also skips it. A malformed or missing-profile marker follows the visible failure handling in that reference. Never copy a marker-selected profile over the installed working copy.
Open references/style-guide.md and check the default tokens. If they're still the shipped defaults (paper #f5f5f5, ink #2d3142, accent #eb6c36 atomic-tangerine), pause and ask the user:
"This is your first diagram in this project. The style guide is still at the default (neutral white-smoke + atomic-tangerine). Do you want to customize it to match your brand first? Options: (a) pull from your website URL, (b) extract from an installed skill, (c) extract from a local folder / design-system directory, (d) paste tokens manually, (e) proceed with the default for now, (f) load a saved client profile."
Then branch per the matching section of references/onboarding.md; for (f) follow references/profiles.md.
Once the style guide has been customized (or the user explicitly opted for default), skip this gate on subsequent runs. A leading profile header names the copied-in active profile. Without a header, any semantic-role value or typography family differing from shipped defaults means custom-unsaved: skip the gate and offer to save it as a profile. All-default tokens with no marker/header trigger the gate. At the end of every onboarding method, offer to save the result as a named client profile per references/profiles.md.
What ships with it
60 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/example-architecture-dark.html 12 KB
- assets/example-architecture-full.html 15 KB
- assets/example-architecture.html 12 KB
- assets/example-bar-dark.html 8.9 KB
- assets/example-bar-full.html 11 KB
- assets/example-bar.html 8.7 KB
- assets/example-beeswarm-dark.html 32 KB
- assets/example-beeswarm-full.html 36 KB
- assets/example-beeswarm.html 31 KB
- assets/example-bubble-dark.html 11 KB
- assets/example-bubble-full.html 15 KB
- assets/example-bubble.html 11 KB
- assets/example-bump-dark.html 13 KB
- assets/example-bump-full.html 16 KB
- assets/example-bump.html 12 KB
- assets/example-data-flow-dark.html 13 KB
- assets/example-data-flow-full.html 15 KB
- assets/example-data-flow.html 13 KB
- assets/example-datalake-dark.html 25 KB
- assets/example-datalake-full.html 28 KB
- assets/example-datalake.html 26 KB
- assets/example-db-schema-dark.html 24 KB
- assets/example-db-schema-full.html 27 KB
- assets/example-db-schema.html 24 KB
- assets/example-dependency-dark.html 17 KB
- assets/example-dependency-full.html 21 KB
- assets/example-dependency.html 17 KB
- assets/example-deployment-dark.html 13 KB
- assets/example-deployment-full.html 16 KB
- assets/example-deployment.html 13 KB
- assets/example-dp-integration-dark.html 14 KB
- assets/example-dp-integration-full.html 17 KB
- assets/example-dp-integration.html 14 KB
- assets/example-dp-security-matrix-dark.html 10 KB
- assets/example-dp-security-matrix-full.html 12 KB
- assets/example-dp-security-matrix.html 11 KB
- assets/example-er-dark.html 14 KB
- assets/example-er-full.html 17 KB
- assets/example-er.html 14 KB
- assets/example-fishbone-dark.html 8.5 KB
- assets/example-fishbone-full.html 11 KB
- assets/example-fishbone.html 8.4 KB
- assets/example-flowchart-dark.html 9.0 KB
- assets/example-flowchart-full.html 12 KB
- assets/example-flowchart.html 9.0 KB
- assets/example-gantt-dark.html 10 KB
- assets/example-gantt-full.html 12 KB
- assets/example-gantt.html 9.8 KB
- assets/example-high-level-dark.html 24 KB
- assets/example-high-level-full.html 28 KB
- assets/example-high-level-vertical-dark.html 24 KB
- assets/example-high-level-vertical-full.html 28 KB
- assets/example-high-level-vertical.html 30 KB
- assets/example-high-level.html 26 KB
- assets/example-import-drawio.html 12 KB
- assets/example-import-mermaid.html 7.9 KB
- assets/example-it-state-dark.html 12 KB
- assets/example-it-state-full.html 14 KB
- assets/example-it-state.html 12 KB
- assets/example-journey-dark.html 8.9 KB
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.
- 2d ago Changed · +1 lines 1801db2ce04d
- 8d ago Changed · +20 lines · +43 tokens per session 6d6988acf779
- 13d ago First seen · 565 lines · 145 tokens per session scan A 8366ef4d11c3
diagram-design is a skill published in the GitHub repository mxyhi/ok-skills (485 stars, last pushed 3d ago), licensed Apache-2.0. It adds 188 tokens to every session and 10,212 once invoked, about $0.0009 per session on Opus 5. A static security scan graded it A with 0 findings. It is 86% identical to diagram-design, differing in 26 lines, and is treated as a copy.
Other skills, from other repositories
frontend-ui-engineering
Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
skillshare-ui-website-style
Skillshare frontend design system for the React dashboard (ui/) and Docusaurus website (website/). Use this skill whenever you: build or modify a dashboard page or component in ui/src/, style or layout website pages or custom CSS in website/, create new React components for the dashboard, add pages to the dashboard…
block-kit
Use when a developer wants to build or validate Block Kit layouts for Slack messages, modals, or Home tabs: message layouts, modals/forms/dialogs, Home tab interfaces, interactive buttons or menus, or modifying existing Block Kit JSON. Also trigger on any Slack UI component (sections, actions, inputs, headers, alerts…
awesome-accessibility-audit
An accessibility audit for web interfaces and markup, based on WCAG rules for people using keyboards, screen readers, or other assistive technology. It reviews structure, labels, focus, contrast, motion, and dynamic content.
obsidian-ref
Technical references, manifest rules, file formats, and UX guidelines for Obsidian. Load when checking API details, manifest requirements, or UI/UX standards.
obsidian-theme-dev
CSS/SCSS development patterns for Obsidian themes. Load when working with theme.css, SCSS variables, or CSS selectors.