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 adewale/agentic-mermaid --skill agentic-mermaid-live-editorgit clone --depth 1 https://github.com/adewale/agentic-mermaidWrote 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/adewale/agentic-mermaid/agentic-mermaid-live-editor)<a href="https://agentmods.dev/skills/adewale/agentic-mermaid/agentic-mermaid-live-editor"><img src="https://agentmods.dev/badge/skills/adewale/agentic-mermaid/agentic-mermaid-live-editor/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/adewale/agentic-mermaid/agentic-mermaid-live-editor"><img src="https://agentmods.dev/badge/skills/adewale/agentic-mermaid/agentic-mermaid-live-editor.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.00045 | $0.01437 |
| Opus 5.5 | $0.00018 | $0.00575 |
| Sonnet 5.5 | $0.00009 | $0.00287 |
| Haiku 4.5 | $0.00005 | $0.00144 |
Grade A, and why
agentic-mermaid-live-editor-development 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 2mo 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.
Agentic Mermaid live editor development
Edit the modular editor sources and preserve the contracts shared by the standalone editor and the deployed website.
Source map
| Path | Role |
|---|---|
editor/js/ |
Editor behavior. Treat sharing.js, rendering.js, and state.js as contract sources. |
editor/css/ |
Editor styling. |
editor/html/ |
Top bar and workspace partials. |
editor/examples.ts |
Canonical editor examples. |
scripts/site/editor.ts |
Assemble the standalone editor.html. |
website/build.ts |
Assemble the deployed /editor/ and all public pages that link to it. |
scripts/site/editor-state-url.ts |
Canonical build-time encoder and validator for editor-state URLs. |
src/browser.ts |
Browser renderer API exposed as window.__mermaid. |
Do not edit generated editor.html or website/public/ files directly.
Build and test cycle
Run the target that owns the changed surface:
bun run editor # standalone editor.html
bun run website # production website/public, including /editor/
bun run website:check # clean in-memory website + Worker artifact contracts
bun run typecheck
For behavior changes, also run the focused editor unit tests and the browser lane. The browser lane requires Playwright Chromium and AM_BROWSER_TESTS=1.
State contract
Keep editor state in the canonical shape from editor/js/state.js:
state = {
palette: 'paper',
style: 'crisp',
seed: 0,
zoom: 1,
config: {},
}
palettestores the registered palette input name.stylestores the registered Look input name orcrisp.seedaffects styled ink without changing layout.configcontains admitted serializable render options.- Browser chrome dark/light mode is separate from diagram appearance and must not rewrite
state.palette.
When adding state, update serialization, sanitization, restoration, control hydration, and tests together.
Render and verification boundary
Follow the pipeline in editor/js/rendering.js:
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.
- 2mo ago First seen · 159 lines · 45 tokens per session scan A c2a0f2854399
agentic-mermaid-live-editor-development is a skill published in the GitHub repository adewale/agentic-mermaid (69 stars, last pushed today), licensed MIT. It adds 45 tokens to every session and 1,437 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. It comes from a forked repository.
Other skills, from other repositories
mermaid-lint
Findet und behebt Mermaid-Diagramme, die GitHub nicht rendert ("Unable to render rich display"). Prueft jeden mermaid-Block mit dem echten Mermaid-Parser ohne Browser und belegt das Ergebnis danach an der lebenden GitHub-Seite.
incident-postmortem
Use when an outage, production incident, or significant service degradation has occurred and the team needs to write a structured blameless post-mortem. Triggers on phrases like "write a post-mortem", "incident review", "what went wrong", "outage report", "root cause analysis", or "RCA". Covers timeline…
code-analysis
Builds an understanding of a whole codebase or subsystem — what it does, how it is structured, where the risk and complexity concentrate, and reports it as a map someone can act on. Use this whenever the user is new to a repo, inherits unfamiliar code, asks how something works end to end, wants an architecture…
log-analysis
Extracts an answer from logs, traces, or metrics — finding the relevant lines in volume, correlating across services, and telling signal from noise. Use this whenever the user points at a log file, asks what happened at a particular time, mentions grepping logs, wants to know how often something occurs, or is trying…
refactor-plan
Create a concrete plan before starting a multi-file refactor. Use when the user asks to plan, sequence, scope, or safely execute a refactor across multiple files; always investigate first, output the plan, and wait for confirmation before making code changes.
refactoring-best-practices
Safe refactoring guidance for legacy and existing codebases. Use when improving design without changing behavior, creating seams around hard dependencies, migrating null/string/generic exceptions to typed failure contracts, extracting a repository from direct SQL/ORM access, introducing Domain Events into legacy…