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 HK-hub/AgentSkills --skill diagram-buildergit clone --depth 1 https://github.com/HK-hub/AgentSkillsWrote 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/hk-hub/agentskills/diagram-builder)<a href="https://agentmods.dev/skills/hk-hub/agentskills/diagram-builder"><img src="https://agentmods.dev/badge/skills/hk-hub/agentskills/diagram-builder/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/hk-hub/agentskills/diagram-builder"><img src="https://agentmods.dev/badge/skills/hk-hub/agentskills/diagram-builder.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.00106 | $0.01600 |
| Opus 5 | $0.00053 | $0.00800 |
| Sonnet 5 | $0.00021 | $0.00320 |
| Haiku 4.5 | $0.00011 | $0.00160 |
Grade A, and why
diagram-builder 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 7d 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 — 114 lines — stays where its author put it; the contents beside it link to each section on GitHub.
diagram-builder — 架构图与流程图绘制 Skill
概述
本 skill 提供两种图表绘制方式：
- 内联可视化（推荐）：调用
read_me+show_widget工具，在对话中直接渲染精美 SVG/HTML 图表。 - Mermaid 代码块：在 Markdown 中输出 Mermaid 语法，适合需要嵌入文档的场景。
方式一：内联 SVG/HTML（show_widget，推荐）
触发时机
凡用户明确要求"绘制"、"画出"、"可视化"某类图表，或对话内容用图表呈现比文字更清晰时，优先使用此方式。
操作步骤
- 先调用
read_me，加载diagram模块（获取 CSS 变量、颜色、排版规则）。 - 再调用
show_widget，传入原始 SVG 或 HTML 片段。 - SVG 必须以
<svg>标签开头，viewBox 格式为0 0 680 <height>，宽度固定 680px。 - 禁止包含
<!DOCTYPE>、<html>、<head>、<body>标签。
图表类型与示例
参考 references/diagram-types.md，其中包含以下图表类型的 SVG 骨架与最佳实践：
- 系统架构图（分层盒子 + 箭头）
- 微服务 / 云原生架构图（服务网格、API Gateway、数据库集群）
- 网络拓扑图（节点 + 连线）
- 业务流程图（泳道图、决策菱形）
- 数据流图（数据源 → 处理 → 存储 → 输出）
- 时序图（角色 + 时序线 + 消息箭头）
- 状态机图（圆角矩形状态 + 转换箭头）
- ER 图（实体矩形 + 关系线）
SVG 设计规范
- 颜色：加载
read_me diagram后按其 CSS 变量定义使用，保持整体一致性。 - 字体：系统默认无衬线字体，中文内容使用
font-family="sans-serif"。 - 间距：组件间距不少于 16px，文字与边框间距不少于 8px。
- 箭头：使用 SVG
<marker>定义 arrowhead，保持风格统一。 - 分组：用
<g>元素对同类节点分组，复杂图表使用<rect>作为容器背景框。 - 图例：复杂图表右下角添加图例说明颜色/形状含义。
箭头 Marker 规范（关键！）
参考 references/svg-marker-guide.md 获取完整箭头定义规范。核心要点：
- 方向规则：marker 的路径必须朝右（+x 方向），三角形尖端在 x 最大值处。
orient="auto"会自动沿线的方向旋转，所以朝右的路径在竖线上会自然旋转为朝下。 - 尺寸规则：
markerWidth和markerHeight必须 ≥ viewBox 宽高，否则视口裁切会导致箭头只剩一半或方向错乱。 - refX/refY：
refX放到路径尖端 x 坐标、refY放 y 中心，确保尖端精确对齐线尾。 - 图例中的箭头：图例行内的水平箭头线同样使用向下 marker，
orient="auto"会自动适配水平方向。
分层架构图布局规范
参考 references/architecture-layout-guide.md 获取完整分层布局指南。核心要点：
- 层级分组框：每层用
stroke-dasharray虚线圆角矩形包裹所有同层组件（标题条 + 子组件），左上角标注层号。 - 层间箭头间距：至少 40px，箭头上端距上层框底 8px、下端距下层框顶 8px，确保箭头完整可见。
- viewBox 高度：先计算所有内容底部坐标 + 图例高度 + 16px 余量，再四舍五入取整。宁大勿小，避免末尾元素被裁切。
- 图例位置：固定在最底部独立区域，与最下层内容保持 ≥16px 间距，横排紧凑布局。
方式二：Mermaid 代码块
当用户需要在文档中嵌入图表，或明确要求 Mermaid 语法时使用。
Mermaid 常用图表类型
flowchart TD # 自上而下流程图
flowchart LR # 从左到右流程图
sequenceDiagram # 时序图
stateDiagram-v2 # 状态机
erDiagram # ER 图
classDiagram # 类图
gantt # 甘特图
graph # 通用图
What ships with it
6 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.
- 7d ago First seen · 114 lines · 106 tokens per session scan A 9e2ba989edee
diagram-builder is a skill published in the GitHub repository HK-hub/AgentSkills (6 stars, last pushed 23d ago), licensed MIT. It adds 106 tokens to every session and 1,600 once invoked, about $0.0005 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
mermaid
Create, validate, and repair Mermaid.js diagrams. Use when generating flowcharts, sequence, class, ER, state, or Gantt diagrams, or any visualization.
loft
Loft the shape before cutting steel — answer a design question that prose cannot settle by building a throwaway artifact: a pure logic module in a clickable shell, or structurally different UI variants behind one route. The captain reacts to the artifact; the answer folds into the decision; the artifact never docks.…
plannotator-annotate
Open Plannotator's annotation UI for a file, folder, or URL, then address the returned annotations.
slides
Build a Grida slides deck — a .canvas bundle in slides mode whose pages are SVG documents (16:9, one SVG per slide). Use when creating a presentation, pitch deck, slideshow, or talk.
visual-qa
Runs rigorous visual QA across web, terminal, and paginated surfaces with screenshot evidence and a verdict. Use for any UI build or change, or when asked whether a page, component, or TUI looks right.
frontend
Builds, styles, and polishes web UI and UX. Use for any frontend, page, component, styling, layout, animation, or visual-quality task, or when asked to make an interface look or feel a certain way.