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 konraddzbik/architecture-diagram-skill --skill architecture-diagramgit clone --depth 1 https://github.com/konraddzbik/architecture-diagram-skillWrote 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/konraddzbik/architecture-diagram-skill/architecture-diagram)<a href="https://agentmods.dev/skills/konraddzbik/architecture-diagram-skill/architecture-diagram"><img src="https://agentmods.dev/badge/skills/konraddzbik/architecture-diagram-skill/architecture-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/konraddzbik/architecture-diagram-skill/architecture-diagram"><img src="https://agentmods.dev/badge/skills/konraddzbik/architecture-diagram-skill/architecture-diagram.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 2 findings, up to high
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- high YARA Match · line 4 YARA rule matched a hack tool or exploit indicator (offensive tools, reconnaissance, privilege escalation, or exploit frameworks).Fix: Remove offensive tool references and exploit code. Legitimate agent skills should not contain penetration testing tools, exploit frameworks, or reconnaissance utilities.
- medium Rogue Agent · line 283 Skill establishes unauthorized persistence across sessions via cron jobs, startup scripts, or state files. Session persistence allows an attacker to maintain access beyond the current interaction.Fix: Remove any persistence mechanisms (cron jobs, startup scripts, state files). Skills should not maintain state across sessions without explicit user consent.
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.00203 | $0.04964 |
| Opus 5 | $0.00102 | $0.02482 |
| Sonnet 5 | $0.00041 | $0.00993 |
| Haiku 4.5 | $0.00020 | $0.00496 |
Grade A, and why
architecture-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 13d 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 — 310 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Interactive Architecture Diagrams
Build single-file, drop-in HTML pages that let workshop attendees, clients, or new team members click through how a system works — step by step, with animated data packets flowing between nodes, payload details on a side panel, and toggleable modes (offline/online, dev/prod, v1/v2). The aesthetic is dark and didactic-first: bounded nodes, gentle quadratic wires, packets that glow only on the active step — no rainbow gradients. Rebrand via the CSS tokens in assets/css-tokens.css.
When to reach for this skill
| Situation | Use this skill? |
|---|---|
| "Show me how the auth flow works" (interactive, for a workshop) | Yes |
| "Design the RAG pipeline before we build it" (planning new service) | Yes |
| "Map our microservices and how they communicate" | Yes |
| "Visualize the CI/CD pipeline for onboarding docs" | Yes |
| "Show the data flow through our ETL pipeline" | Yes |
| "Draw an agentic multi-agent system with tool calls" | Yes |
| "Build me an architecture mockup we can iterate on with the team" | Yes |
| "Draw a sequence diagram for the PR" (static, goes in markdown) | No — a Mermaid sequence diagram inline is simpler |
| "Add a diagram to a slide deck or PDF" (static, not interactive) | No — this produces interactive HTML, not images or slides |
| "I just need a static boxes-and-arrows topology" (no flows/steps) | No — a Mermaid flowchart is enough |
The differentiator is interactivity + sequenced data flow: if the value is "click through it and watch what happens", use this skill; if you need a static image, a slide, or an inline diagram, use Mermaid instead.
The mental model
Every diagram has four things:
- Nodes — services, datastores, users, queues, external systems. Each has a role (color) and metadata (tech stack, port, deployment target).
- Flows — named scenarios the user can pick (e.g.
RAG Query,Direct Query,Ingest,Auth). Each flow is an ordered list of steps. - Steps —
{from, to, color, title, route, payload, desc, chips}. Each step lights up one wire and one target node. (colorandtitleare required — a missingcolorleaves the wire uncolored, a missingtitleleaves the panel header blank.) - Modes — orthogonal toggle (offline/online, dev/prod, v1/v2). Modes can:
- hide/show entire nodes (e.g. Seed only exists offline)
- rename a node (Qdrant → BigQuery)
- swap payload bodies, ports, auth headers, latency chips
What ships with it
10 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/css-tokens.css 4.0 KB
- assets/template.html 73 KB
- examples/agentic-tool-calling.json 3.7 KB
- examples/auth-oauth2.json 3.8 KB
- examples/cicd-pipeline.json 3.7 KB
- examples/event-driven.json 5.2 KB
- examples/rag-eskadra-bielik.json 4.7 KB
- references/component-library.md 15 KB
- references/flow-design-patterns.md 16 KB
- references/screenshot.js 4.8 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.
- 13d ago First seen · 310 lines · 203 tokens per session scan A a7cafa547c15
architecture-diagram is a skill published in the GitHub repository konraddzbik/architecture-diagram-skill (89 stars, last pushed 1mo ago), licensed MIT. It adds 203 tokens to every session and 4,964 once invoked, about $0.0010 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-08-30.
Other skills, from other repositories
color-conversion-get-color
Convert a color value from one format to another. The response always includes all four formats.
qr-code-get-base64
Returns a JSON envelope containing the QR code as a base64-encoded PNG string, along with its dimensions.
qr-code-get-qr
Returns a raw PNG image of the QR code. Ideal for direct embedding or file download.
color-accessibility
Trigger on: check contrast, WCAG contrast, accessible colors, readable text color, fix low-contrast, dimmed text color, palette accessibility, pastel color, textcolor for background, make this color readable, UI theme contrast, Neovim highlight contrast. Evaluate, fix, and generate accessible fg/bg pairs with the…
diagram
Generates technical diagrams using the D2 language, with automatic color-contrast verification and diagram-type detection.
accessibility
Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".