Getting it into your agent
This one installs as part of its plugin. Adding the marketplace and installing the plugin brings it with everything else the plugin ships.
/plugin marketplace add atman-33/workhub/plugin install visualsWrote 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/atman-33/workhub/html-diagram)<a href="https://agentmods.dev/skills/atman-33/workhub/html-diagram"><img src="https://agentmods.dev/badge/skills/atman-33/workhub/html-diagram.svg" alt="Measured on agentmods" 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.00093 | $0.01357 |
| Opus 5 | $0.00046 | $0.00678 |
| Sonnet 5 | $0.00019 | $0.00271 |
| Haiku 4.5 | $0.00009 | $0.00136 |
Grade A, and why
html-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 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.
How it starts
The opening of the file, as written. The whole thing — 151 lines — stays where its author put it; the contents beside it link to each section on GitHub.
HTML diagram
One .html file, inline SVG, embedded CSS, no external images. It opens
anywhere and travels as an attachment.
Source: diagram-design. See
the plugin's NOTICE.md.
The one rule that governs the rest
The highest-quality move is usually deletion.
- Every node is a distinct idea. Two nodes that always travel together are one node.
- Every connector carries information. If the relationship is obvious from the layout, remove the line.
- The accent colour is editorial, not a flag. One or two focal nodes. Accenting five erases the signal.
- The diagram is not finished when everything is on it. It is finished when nothing can come off.
Target density 4 out of 10: technically complete, not so dense it needs its own guide. Above nine nodes it is probably two diagrams.
Before drawing
Ask yourself: would the reader learn more from this than from a well-written paragraph? If not, write the paragraph.
Do not draw for a list of things (use a table), a simple before/after (a table), or a single shape (write the sentence).
Then say in one short message what you are about to draw — the type, and anything the complexity budget will force out — so the user can redirect before you spend the render. Skip that pause only when the request already pins the type and content exactly.
Choose the type
Read references/diagram-types.md and pick one. Eight types cover almost
everything:
| Showing | Type |
|---|---|
| Decision logic with branches | Flowchart |
| Time-ordered messages between actors | Sequence |
| Components and their connections | Architecture |
| Events positioned in time | Timeline |
| Parent to children | Tree |
| A cross-functional process with handoffs | Swimlane |
| Two-axis positioning or prioritisation | Quadrant |
| A reinforcing cycle where the last step feeds the first | Loop |
If two seem to fit, pick the dominant axis. If a three-column table says the same thing, use the table.
What ships with it
3 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.
- 2d ago First seen · 151 lines · 93 tokens per session scan A cc420ae27182
html-diagram is a skill published in the GitHub repository atman-33/workhub (2 stars, last pushed 2d ago), licensed MIT. It adds 93 tokens to every session and 1,357 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-05.
Other skills, from other repositories
gonavi-cli
Operate databases through the GoNavi headless CLI — the gonavi executable shipped in verified GitHub Release archives. Covers listing/adding/importing saved connections, running SQL queries against saved connections or ad-hoc connection files, exporting result sets to csv/json/md/html/xlsx, batch-executing SQL files…
ppt-orchestrator
A dispatcher for creating presentations, slide decks, long images, and weekly reports. It chooses a visual style and output format, then sends the work to a more specialised add-on.
fidelity-gate
Build a UI against a frozen visual reference without drift - an inventory extracted before any code, a relics list, and a gate that MEASURES computed styles on a fixture carrying the reference's own data. Use when a mockup, design spec or screenshot is the contract.
zhongguose-html-skill
An HTML-only presentation system using traditional Chinese colours and Chinese-style visual design. It helps organise source material into a report structure and produces a self-contained HTML file with its assets.
readmd-style-custom
Generate custom CSS rules and HTML head tags for ReadMD document styling.
figma-fetch
Extract frame/component structure and all visible text from a Figma design URL. Use whenever a prompt or a fetched issue contains a figma.com/design or figma.com/file link.