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 saajunaid/caddis-plugin --skill architecture-diagramgit clone --depth 1 https://github.com/saajunaid/caddis-pluginWrote 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/saajunaid/caddis-plugin/architecture-diagram)<a href="https://agentmods.dev/skills/saajunaid/caddis-plugin/architecture-diagram"><img src="https://agentmods.dev/badge/skills/saajunaid/caddis-plugin/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/saajunaid/caddis-plugin/architecture-diagram"><img src="https://agentmods.dev/badge/skills/saajunaid/caddis-plugin/architecture-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.00031 | $0.01605 |
| Opus 5.5 | $0.00012 | $0.00642 |
| Sonnet 5.5 | $0.00006 | $0.00321 |
| Haiku 4.5 | $0.00003 | $0.00161 |
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 19d 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 — 157 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Architecture Diagram
Generate professional dark-themed architecture diagrams as standalone HTML files with embedded SVG. Browser-only — no Graphviz, no Mermaid renderer, no server required.
Not suitable for: scientific subjects, physical objects, floor plans, hand-drawn aesthetics — use excalidraw or draw-io for those.
When to Use
Load this skill when users ask for:
- System architecture or component diagrams
- Cloud infrastructure diagrams (AWS/Azure/GCP)
- Microservice topology maps
- API and database relationship diagrams
- Deployment diagrams
Complements architecture-design (planning/notation) — use that first, then use this skill to produce the rendered output artifact.
Semantic Color System
Map every component to a type, then apply these colors consistently:
| Component Type | Stroke | Fill |
|---|---|---|
| Frontend | #22d3ee |
rgba(8, 51, 68, 0.4) |
| Backend / Service | #34d399 |
rgba(6, 78, 59, 0.4) |
| Database | #a78bfa |
rgba(76, 29, 149, 0.4) |
| Cloud / AWS | #fbbf24 |
rgba(120, 53, 15, 0.3) |
| Security / Auth | #fb7185 |
rgba(136, 19, 55, 0.4) |
| Message Bus / Queue | #fb923c |
rgba(251, 146, 60, 0.3) |
| External / Third-party | #94a3b8 |
rgba(30, 41, 59, 0.5) |
Canvas & Typography
- Background:
#020617(slate-950) with a 40px grid pattern usingrgba(148, 163, 184, 0.05)lines - Font: JetBrains Mono from Google Fonts (
wght@400;500;700)- Component labels: 12px weight 500
- Section/group titles: 14px weight 700
- Annotations: 7–9px weight 400
- Stroke width: 1.5px on all component boxes
SVG Structure Rules
Render Order (critical)
Render in this exact sequence to avoid transparency bleed-through:
- Background + grid
- Region/security boundary containers (dashed)
- Connection arrows ← must come before components
- Component boxes
- Component labels
- Legend
Double-Rect Masking (required for all component boxes)
Prevents arrow lines from showing through filled shapes:
<!-- 1. opaque background rect (clips arrow lines) -->
<rect x="X" y="Y" width="W" height="H" rx="6"
fill="#020617" stroke="none"/>
<!-- 2. semi-transparent styled rect on top -->
<rect x="X" y="Y" width="W" height="H" rx="6"
fill="FILL_COLOR" stroke="STROKE_COLOR" stroke-width="1.5"/>
<!-- 3. label -->
<text x="X+W/2" y="Y+H/2+4" text-anchor="middle"
font-family="JetBrains Mono" font-size="12" font-weight="500"
fill="STROKE_COLOR">Component Name</text>
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.
- 19d ago Changed · -17 tokens per session 3367a54de23f
- 1mo ago First seen · 157 lines · 48 tokens per session scan A e35f89796e1a
architecture-diagram is a skill published in the GitHub repository saajunaid/caddis-plugin (0 stars, last pushed 2d ago), licensed MIT. It adds 31 tokens to every session and 1,605 once invoked, about $0.0001 per session on Opus 5.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
goga-define-experience
Define the user experience required to achieve the established product goals and solve the identified problem.
render-html-page
Convert a finished trip plan into a polished, self-contained HTML page using the design system.
anti-slop-image-direction
Opt-in, paid reference images for marketing or new-site work: plan one image per section, confirm count, backend and cost, generate with pi-nano-banana, then distill a written direction brief for the mockup loop. Images are direction, never source. Never for product UI. Triggers: "generate design references", "image…
vectorcraft
Headless vector illustration with VectorCraft (Illustrator-style paths, shapes, type, fills/strokes), provisioned on demand by pi-craft - draw shapes and export svg, pdf or png, or convert between vector formats. Use for "draw a logo as an svg", "export this illustration as a pdf", "convert this svg to a png at 2x"…
goga-define-challenge
Challenge the complete product definition before the PRD is generated.
goga-prototype-contracts
Designing usages and annotations per cell for the prototype pipeline.