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 guanyang/open-agent-hub --skill baoyu-diagramgit clone --depth 1 https://github.com/guanyang/open-agent-hubWrote 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/guanyang/open-agent-hub/baoyu-diagram)<a href="https://agentmods.dev/skills/guanyang/open-agent-hub/baoyu-diagram"><img src="https://agentmods.dev/badge/skills/guanyang/open-agent-hub/baoyu-diagram/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/guanyang/open-agent-hub/baoyu-diagram"><img src="https://agentmods.dev/badge/skills/guanyang/open-agent-hub/baoyu-diagram.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.00146 | $0.03514 |
| Opus 5 | $0.00073 | $0.01757 |
| Sonnet 5 | $0.00029 | $0.00703 |
| Haiku 4.5 | $0.00015 | $0.00351 |
Grade A, and why
baoyu-diagram 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 12d 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
100% identical to baoyu-diagram — 0 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 — 249 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Diagram Generator
Create professional SVG diagrams across multiple diagram types. All output is a single self-contained .svg file with embedded styles and fonts.
Supported Diagram Types
| Type | When to Use | Key Characteristics |
|---|---|---|
| Architecture | System components & relationships | Grouped boxes, connection arrows, region boundaries |
| Flowchart | Decision logic, process steps | Diamond decisions, rounded step boxes, directional flow |
| Sequence | Time-ordered interactions between actors | Vertical lifelines, horizontal messages, activation bars |
| Structural | Class diagrams, ER diagrams, org charts | Compartmented boxes, typed relationships (inheritance, composition) |
| Mind Map | Brainstorming, topic exploration | Central node, radiating branches, organic layout |
| Timeline | Chronological events | Horizontal/vertical axis, event markers, period spans |
| Illustrative | Conceptual explanations, comparisons | Free-form layout, icons, annotations, visual metaphors |
| State Machine | State transitions, lifecycle | Rounded state nodes, labeled transitions, start/end markers |
| Data Flow | Data transformation pipelines | Process bubbles, data stores, external entities |
Design System
Color Palette
Semantic colors for component categories:
| Category | Fill (rgba) | Stroke | Use For |
|---|---|---|---|
| Primary | rgba(8, 51, 68, 0.4) |
#22d3ee (cyan) |
Frontend, user-facing, inputs |
| Secondary | rgba(6, 78, 59, 0.4) |
#34d399 (emerald) |
Backend, services, processing |
| Tertiary | rgba(76, 29, 149, 0.4) |
#a78bfa (violet) |
Database, storage, persistence |
| Accent | rgba(120, 53, 15, 0.3) |
#fbbf24 (amber) |
Cloud, infrastructure, regions |
| Alert | rgba(136, 19, 55, 0.4) |
#fb7185 (rose) |
Security, errors, warnings |
| Connector | rgba(251, 146, 60, 0.3) |
#fb923c (orange) |
Buses, queues, middleware |
| Neutral | rgba(30, 41, 59, 0.5) |
#94a3b8 (slate) |
External, generic, unknown |
| Highlight | rgba(59, 130, 246, 0.3) |
#60a5fa (blue) |
Active state, focus, current step |
What ships with it
5 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.
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.
- 12d ago First seen · 249 lines · 146 tokens per session scan A 55a2d050c3a2
baoyu-diagram is a skill published in the GitHub repository guanyang/open-agent-hub (965 stars, last pushed yesterday), licensed MIT. It adds 146 tokens to every session and 3,514 once invoked, about $0.0007 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to baoyu-diagram, differing in 0 lines, and is treated as a copy.
Other skills, from other repositories
agent-eyes
Visual context analyzer for AI agents. Provides screenshots, accessibility scans, DOM snapshots, and element descriptions for web pages. Use when you need to see what a web page looks like, analyze accessibility issues, inspect DOM structure, or get detailed element information. Triggers on requests like "take a…
agent-canvas-setup
Dependency checker and installer for agent-canvas, agent-eyes, and canvas-edit skills. Use BEFORE running any canvas skill for the first time, or when canvas skills fail with import/browser errors. Triggers on "setup agent canvas", "install canvas dependencies", "canvas not working", "playwright not found", or any…
software-in-worten
Übersetzt zwischen Benutzeroberfläche und Text — in beide Richtungen. Aus einer beschriebenen Oberfläche wird ein Skill; aus einem Skill wird eine Oberfläche. Nutzen, wenn eine Anwendung entworfen wird und der Ablauf noch unklar ist, wenn ein bestehendes Werkzeug als Skill verfügbar gemacht werden soll, wenn…
ui-ux-auditor
A UI and UX review skill that examines a project’s visual design and interactions, using screenshots, a public site, or the source code as evidence. UI means the visible interface; UX means how people use it.
pivoshenko-brand
Central brand system for Volodymyr Pivoshenko — voice, type, color, layout, iconography. Self-contained; covers any output format (web UI, PDF, slide deck, README, social card, email, terminal/theme port, throwaway mock). Trigger even when the user doesn't say "brand" — any visual or copy decision touching pivoshenko…
mermaid-generator
A manually triggered guide for creating Mermaid diagrams, which are text descriptions that render as flowcharts and other diagrams. It chooses a diagram type and generates compatible, professionally styled Mermaid code.