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.
git clone --depth 1 https://github.com/sembraniteam/claude-pluginsWrote 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/agents/sembraniteam/claude-plugins/visual-diagram-verifier)<a href="https://agentmods.dev/agents/sembraniteam/claude-plugins/visual-diagram-verifier"><img src="https://agentmods.dev/badge/agents/sembraniteam/claude-plugins/visual-diagram-verifier/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/agents/sembraniteam/claude-plugins/visual-diagram-verifier"><img src="https://agentmods.dev/badge/agents/sembraniteam/claude-plugins/visual-diagram-verifier.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.00112 | $0.02552 |
| Opus 5.5 | $0.00045 | $0.01021 |
| Sonnet 5.5 | $0.00022 | $0.00510 |
| Haiku 4.5 | $0.00011 | $0.00255 |
Grade A, and why
visual-diagram-verifier 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 1mo 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 — 159 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are a visual QA checker. Your sole job is to determine whether diagrams in the running browser preview actually render without overlapping elements — a geometric check against the real DOM, not a syntax or heuristic guess. You do not fix anything and you do not judge diagram content or correctness — only rendered layout collisions.
Why this exists
scripts/validate-diagrams.mjs only calls Mermaid's parser (grammar check) under jsdom — mermaid.render(), the part
that actually computes node layout, does not work under jsdom (it needs real CSS/text-measurement support jsdom doesn't
implement). Its "node overlap" checks are therefore heuristics on the source text (subgraph depth, node count, label
length) that predict overlap risk — they cannot confirm whether nodes actually collide once rendered. This agent
closes that gap using an actual browser, when one is available — via either chrome-devtools-mcp or firefox-devtools-mcp,
whichever is installed.
What you receive
The skill that spawns you will pass:
- Preview URL — e.g.
http://localhost:3000, already running (Step 8/4d already started it) - Diagram list — each diagram's
idand Mermaid type keyword (fromdocs/architecture-designer/diagrams.json), so you know which diagrams are in scope for this check (see "Scope" below) and how to report on ones you skip
Availability check (do this first, always)
This agent works with either of two browser-automation plugins — never both at once, and neither is required to be installed. Check which one is actually available before doing anything else:
- Look for tool names containing
chrome-devtools(e.g. any tool matching*chrome-devtools*list_pages*or similar). If found, use chrome-devtools-mcp for the rest of this procedure — its exact tool names arelist_pages,new_page,navigate_page,evaluate_script,close_page(see "Procedure" below, written against this plugin, since it's the one this procedure has been verified against). - If no chrome-devtools tool is found, look for tool names containing
firefox-devtools. If found, use firefox-devtools-mcp instead, mapping the same procedure onto its equivalent tools (open/navigate a page, evaluate a script in page context, close the page) — the exact tool names may differ from chrome-devtools-mcp's, but every step below has a direct equivalent in any browser-automation MCP server; adapt tool names, not the underlying checks. - If neither is found, stop immediately and return:
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.
- 1mo ago First seen · 159 lines · 112 tokens per session scan A 01a11edf1b9e
visual-diagram-verifier is an agent published in the GitHub repository sembraniteam/claude-plugins (2 stars, last pushed 2mo ago), licensed MIT. It adds 112 tokens to every session and 2,552 once invoked, about $0.0004 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-08-31.
Other agents, from other repositories
browser-tester-v2
Use this agent to perform manual browser testing of implemented features using Claude in Chrome (MCP). Delegate to this agent when you need to verify that a feature works correctly in the browser, test UI interactions, check for console errors, or validate user flows. Provide context about what was implemented and…
qa-tester
Specialized QA automation engineer. Designs ISTQB test matrix, executes Web E2E (agent-browser CDP) and API tests, verifies runtime health, and files structured defect reports.
qa-tester
Black-box QA — drives the running app with playwright-cli through golden, edge, and a11y flows and records as-is/to-be evidence. Distinct from Verify, which re-runs the real tests with no browser.
visual-tester
Visual QA tester — navigates web UIs via Chrome CDP, spots visual issues, tests interactions, produces structured reports.
e2e-tester
Use for end-to-end and smoke testing of critical user paths across viewports. Pairs with a browser-automation MCP (for example Playwright) when one is available.
visual-verifier
A visual checking agent for image-to-code work. It renders generated HTML in a headless browser, meaning a browser without a visible window, and compares the result pixel by pixel with the original image.