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 | $0.00023 | $0.00718 |
| Sonnet 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 12d 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.
- 12d 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 (51 stars, last pushed 12d ago), licensed MIT. It adds 45 tokens to every session and 1,437 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. It comes from a forked repository.
Other skills, from other repositories
inspecting-hermes-desktop-dom
Read the live Hermes desktop DOM/CSS over CDP.
a11y-debugging
Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines. Use when testing semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, and color contrast.
devtools
Drop-in inspector panel for any json-render app. Use when the user wants to debug a generative UI, inspect the spec tree, edit state at runtime, see dispatched actions, follow stream patches live, browse a catalog, or pick DOM elements to find their spec keys. Triggers include "add devtools", "debug json-render"…
api-not-found
Diagnose missing TanStack Table v9 exports, options, state slices, and instance methods. Load before inventing an API when code sees a type error, undefined feature method, absent object key, adapter mismatch, or v8-shaped example.
migrate-oxlint
Guide for migrating a project from ESLint to Oxlint. Use when asked to migrate, convert, or switch a JavaScript/TypeScript project's linter from ESLint to Oxlint.
debug-optimize-lcp
Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the user mentions…