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 atretyak1985/swarmery --skill mermaid-viewergit clone --depth 1 https://github.com/atretyak1985/swarmeryWrote 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/atretyak1985/swarmery/mermaid-viewer)<a href="https://agentmods.dev/skills/atretyak1985/swarmery/mermaid-viewer"><img src="https://agentmods.dev/badge/skills/atretyak1985/swarmery/mermaid-viewer/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/atretyak1985/swarmery/mermaid-viewer"><img src="https://agentmods.dev/badge/skills/atretyak1985/swarmery/mermaid-viewer.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.00069 | $0.00906 |
| Opus 5.5 | $0.00028 | $0.00362 |
| Sonnet 5.5 | $0.00014 | $0.00181 |
| Haiku 4.5 | $0.00007 | $0.00091 |
Grade A, and why
mermaid-viewer 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 — 65 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Purpose
Materialise any Mermaid diagram source (.mmd) into a themed, interactive HTML viewer — one self-contained file with pan/zoom, ER entity search, and a source-download button. Mermaid 11.4.1 and svg-pan-zoom 3.6.2 load from jsDelivr at runtime; styling is a dark-terminal design system consistent with the html-reporting shell. ER-specific features no-op for other diagram types.
Rules
- Colors in
mermaid.initialize()config must be hex or rgba, never OKLCH — Mermaid's color parser (khroma) does not support it; violation gives a blank viewport. - Mermaid source stays in
<script id="mmd-source" type="text/plain">, never<pre class="mermaid">, or the download button returns SVG. build.shsubstitutes sentinels with POSIXawk, neversed— Mermaid source breakssed.- Playwright verification navigates via
http://localhost:<port>, neverfile://; alwaysverify.sh stop <port>afterwards. - Never bump the pinned deps (mermaid 11.4.1, svg-pan-zoom 3.6.2) without re-running
test.sh+verify.sh+ Playwright on a real fixture. - Fix bugs in
templates/viewer.html.tpl, regenerate, refresh the golden (test.sh --update) — never patch generated HTML in isolation.
Resources
- Read
resources/build-procedure.mdwhen running the pipeline — inputs/outputs, the four-step procedure, script reference, self-check, escalation, examples, file layout. - Read
resources/gotchas-and-pinned-deps.mdwhen debugging rendering or touching the template — the five baked-in gotchas, OKLCH→sRGB conversion table, pinned-dependency rules, CDN supply-chain note, failure modes. - Existing subdirs:
templates/viewer.html.tpl(sentinel skeleton),scripts/(stats.sh,build.sh,verify.sh,test.sh),examples/(sample.mmdfixture +sample.htmlgolden).
How to use
What it does
Turns an existing .mmd file into one self-contained HTML page: rendered diagram, pan and zoom, an entity search filter for ER diagrams, meta badges with counts, and a button to download the original Mermaid source — dark-themed so the output looks finished.
What ships with it
9 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.
- examples/sample.html 23 KB
- examples/sample.mmd 1.1 KB
- resources/build-procedure.md 7.4 KB
- resources/gotchas-and-pinned-deps.md 4.5 KB
- scripts/build.sh 5.9 KB runs code
- scripts/stats.sh 2.7 KB runs code
- scripts/test.sh 1.8 KB runs code
- scripts/verify.sh 2.0 KB runs code
- templates/viewer.html.tpl 22 KB
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 · 65 lines · 69 tokens per session scan A 3cade2594e6b
mermaid-viewer is a skill published in the GitHub repository atretyak1985/swarmery (7 stars, last pushed today), licensed Apache-2.0. It adds 69 tokens to every session and 906 once invoked, about $0.0003 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
excalidraw
Create or extend editable Excalidraw diagrams from descriptions or repository evidence using a local skeleton-to-scene converter.
multi-surface-render
Multi-surface rendering with json-render — one JSON spec produces React web, Next.js, React Native, Ink terminal UIs, PDFs, emails, Remotion videos, OG images, and 3D scenes. Covers renderer target selection, registry mapping, and platform APIs (renderToBuffer, renderToStream, renderToFile). Use when generating output…
web-artifacts-builder-v2
Suite of tools for creating elaborate, multi-component claude.ai HTML artefacts using modern frontend web technologies (React 19, Tailwind CSS v4, shadcn/ui). Use for complex artefacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artefacts.
design-workflow
A workflow for bringing design handoff files, design tokens, and project design briefs into a code project. It validates the tokens and loads research, system, and specification notes before interface implementation.
create-glyph
Create R-based pictogram glyphs for skill, agent, or team icons in the visualization layer. Covers concept sketching, ggplot2 layer composition using the primitives library, color strategy, registration in the appropriate glyph mapping file and manifest, rendering via the build pipeline, and visual verification of the…
design-cli-output
Design terminal output for a CLI tool with chalk colors, Unicode glyphs, multiple verbosity levels (human, verbose, quiet, JSON), and consistent voice rules. Covers color palette selection, status indicator design, reporter function architecture, ceremony/narrative output variants, and cross-terminal compatibility.…