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 agentmods add agents/sembraniteam/claude-plugins/visual-diagram-verifiergit 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.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 | $0.00112 | $0.02552 |
| Opus 5 | $0.00056 | $0.01276 |
| Sonnet 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 4d 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.
- 4d 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 1mo ago), licensed MIT. It adds 112 tokens to every session and 2,552 once invoked, about $0.0006 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 agents, from other repositories
playwright-test-generator
Use this agent to convert a SigNoz E2E test plan into Playwright spec files under tests/e2e/tests/ /. Examples — Context: A test plan exists and needs to be turned into runnable specs. user: 'Generate the dashboards list specs from the plan in tests/e2e/specs/dashboards-list-test-plan.md' assistant: 'Using the…
testing
Agent "testing" from windviki/vBookmarks, covering testing & real-browser harness (detail), unit tests (detail), manual testing checklist and headless smoke test (docker).
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
Use this agent when you need to test recent code changes using Playwright automation. Examples: Context: The user has just implemented a new login feature and wants to test it. user: "I just added a new login validation feature, can you test it?" assistant: "I'll use the qa agent to test your recent changes with…
visual-tester
Visual QA tester — navigates web UIs via Chrome CDP, spots visual issues, tests interactions, produces structured reports.
e2e-runner
端到端测试专家，首选使用 Vercel Agent Browser，备选使用 Playwright。主动用于生成、维护和运行 E2E 测试。管理测试旅程，隔离不稳定测试，上传工件（截图、视频、跟踪），并确保关键用户流程正常工作。.