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 AlexK020908/infra-designer/plugin install infra-designerWrote 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/alexk020908/infra-designer/diagram)<a href="https://agentmods.dev/skills/alexk020908/infra-designer/diagram"><img src="https://agentmods.dev/badge/skills/alexk020908/infra-designer/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/alexk020908/infra-designer/diagram"><img src="https://agentmods.dev/badge/skills/alexk020908/infra-designer/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.00077 | $0.00775 |
| Opus 5 | $0.00039 | $0.00387 |
| Sonnet 5 | $0.00015 | $0.00155 |
| Haiku 4.5 | $0.00008 | $0.00077 |
Grade A, and why
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 11d 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 — 61 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Drawing a clear architecture diagram
The spec (infra/<project-name>/spec.json, written in the user's cwd — <dir> below) is
the deterministic source of truth. The diagram is just a view
— optimize it for human clarity and regenerate it freely; it does NOT need to be identical
across runs. The goal: the user opens it and immediately understands the architecture.
There are two engine outputs. Pick by what the user needs.
Option A — Mermaid (default for "make it clear")
python ${CLAUDE_PLUGIN_ROOT}/engine/cli.py mermaid <dir>/spec.json <dir>/diagram.mmd
Mermaid's renderer auto-lays-out the graph — it reduces crossings and handles cycles (e.g. a worker that reads and writes back to a stream) without the sprawl a hand-rolled layout produces. Use it when the draw.io output looks busy, or whenever clarity matters more than AWS icons. It:
- renders inline in GitHub and most IDEs (paste into a ```mermaid block), and
- imports into draw.io: Arrange → Insert → Advanced → Mermaid, paste the
.mmd— draw.io then lays it out cleanly. Tell the user this exact path.
Option B — native draw.io (AWS icons + group boxes)
python ${CLAUDE_PLUGIN_ROOT}/engine/cli.py diagram <dir>/spec.json <dir>/diagram.drawio
Real AWS icons, category colors, and the "AWS Fargate"-style group boxes. Layout is a simple left-to-right layering — good for small/linear graphs, but wide or cycle-heavy graphs can still look busy. If it does:
- prefer Mermaid (Option A), or
- tell the user to open it and run Arrange → Layout → Horizontal Flow (or Vertical Tree) to auto-clean, or
- hand-tune the coordinates yourself (you may — only the spec must be deterministic) using the principles below.
Layout principles (for hand-tuning, or sanity-checking either output)
- Left-to-right tiers: ingress/edge (ALB, CloudFront) → compute (ECS/Lambda) → data stores (RDS/DynamoDB/Redis/S3) → async/analytics (SQS/SNS/Kinesis + workers). One tier per column.
- Group what runs together (multiple services on Fargate) in a boundary box.
- Order nodes within a tier next to the things they connect to — this is the biggest lever for fewer crossing lines.
- Feedback / back edges (cycles) should curve around the main flow, not cut through it.
- Consistent spacing, and keep it within ~one page width (≈1169px in the .drawio) so it doesn't span multiple pages.
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.
- 11d ago First seen · 61 lines · 77 tokens per session scan A 7f07e2c6fb52
diagram is a skill published in the GitHub repository AlexK020908/infra-designer (2 stars, last pushed 2mo ago), licensed MIT. It adds 77 tokens to every session and 775 once invoked, about $0.0004 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-31.
Other skills, from other repositories
visual-asset-design
A guide for turning character, scene, and prop ideas into prompts for generating consistent reference images. It covers layouts, camera views, visual identity, and continuity across image variations.
web-design-engineer
Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use for visual front-end creation, design-system exploration, design critique, or explicit browser acceptance / QA of a web artifact.…
winui-design
Use when designing, reviewing, or fixing WinUI 3: sample and control discovery with winapp find-ui, layout planning, control choice, Fluent Design alignment, Light/Dark/High Contrast theming, typography, spacing, brushes, accessibility, and XAML data-binding design. Load before authoring new XAML, reviewing UI PRs…
architecture-diagram
Create a professional, dark-themed software/system architecture diagram as a single self-contained HTML file with inline SVG. Use when asked to visualize system components, layers, services, or how parts of a codebase fit together.
yida-dashboard
A delivery process for Yida dashboards, meaning screens that show business metrics and charts in one place. It covers data, filters, responsive layouts, loading states, insights, screenshots, and sharing.
yida-density
A set of rules for controlling how much information a custom page shows at once, with compact, comfortable, and spacious layouts. It also defines how the layout changes on phones and how spacing and text sizes stay consistent.