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 ngocsangyem/MeowKit --skill mermaidjs-v11git clone --depth 1 https://github.com/ngocsangyem/MeowKitWrote 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/ngocsangyem/meowkit/mermaidjs-v11)<a href="https://agentmods.dev/skills/ngocsangyem/meowkit/mermaidjs-v11"><img src="https://agentmods.dev/badge/skills/ngocsangyem/meowkit/mermaidjs-v11/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/ngocsangyem/meowkit/mermaidjs-v11"><img src="https://agentmods.dev/badge/skills/ngocsangyem/meowkit/mermaidjs-v11.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.00065 | $0.01064 |
| Opus 5 | $0.00032 | $0.00532 |
| Sonnet 5 | $0.00013 | $0.00213 |
| Haiku 4.5 | $0.00006 | $0.00106 |
Grade A, and why
mk:mermaidjs-v11 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 8d 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 — 142 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Mermaid.js v11
Quick Start
Basic Diagram Structure:
{diagram-type}
{diagram-content}
Common types: flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram,
gantt, and journey. Load references/diagram-types.md for
the complete v11 syntax catalog.
Creating Diagrams
Inline Markdown Code Blocks:
```mermaid
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]
```
Configuration via Frontmatter:
```mermaid
---
theme: dark
---
flowchart LR
A --> B
```
Comments: Use %% prefix for single-line comments.
CLI Usage
Convert .mmd files to images:
# Installation
npm install -g @mermaid-js/mermaid-cli
# Basic conversion
mmdc -i diagram.mmd -o diagram.svg
# With theme and background
mmdc -i input.mmd -o output.png -t dark -b transparent
# Custom styling
mmdc -i diagram.mmd --cssFile style.css -o output.svg
See references/cli-usage.md for Docker, batch processing, and advanced workflows.
JavaScript Integration
HTML Embedding:
<pre class="mermaid">
flowchart TD
A[Client] --> B[Server]
</pre>
<script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
<script>mermaid.initialize({ startOnLoad: true });</script>
See references/integration.md for Node.js API and advanced integration patterns.
Configuration & Theming
Common Options:
theme: "default", "dark", "forest", "neutral", "base"look: "classic", "handDrawn"fontFamily: Custom font specificationsecurityLevel: "strict", "loose", "antiscript"
See references/configuration.md for complete config options, theming, and customization.
Practical Patterns
Load references/examples.md for:
- Architecture diagrams
- API documentation flows
- Database schemas
- Project timelines
- State machines
- User journey maps
References
| Need | Load |
|---|---|
| Diagram syntax | references/diagram-types.md |
| Config, theming, accessibility | references/configuration.md |
| CLI, Docker, batch export | references/cli-usage.md |
| JavaScript integration | references/integration.md |
| Common patterns | references/examples.md |
What ships with it
5 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.
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.
- 8d ago First seen · 142 lines · 65 tokens per session scan A 0e840aac47d9
mk:mermaidjs-v11 is a skill published in the GitHub repository ngocsangyem/MeowKit (14 stars, last pushed 1mo ago), licensed MIT. It adds 65 tokens to every session and 1,064 once invoked, about $0.0003 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-09-03.
Other skills, from other repositories
mermaid
Teaches agents how to write syntactically correct Mermaid diagrams that render without errors across all supported diagram types. Covers quoting rules, common syntax pitfalls, diagram-type-specific syntax (flowchart, sequence, class, ER, Gantt, state, pie, mindmap), subgraphs, styling with classDef and theme…
flowzap-diagrams
Generate, validate and publish workflow, sequence, architecture and mind map diagrams, using FlowZap Code DSL. Use when the user asks to create a workflow, flowchart, sequence diagram, process map, mind map or an architecture diagram. Produces .fz code and instant shareable playground URLs via the FlowZap MCP server.
diagram-creator
Create professional diagrams using Mermaid, PlantUML, and other text-based diagram tools. Generate flowcharts, sequence diagrams, architecture diagrams, and more.
tech-diagram
Use this skill when the user wants to turn a description into a technical diagram — architecture diagrams, flowcharts, sequence diagrams, state machines, ER diagrams, class diagrams, or mind maps. Generates brand-consistent Mermaid that the DesireCore chat renders inline as SVG, with a semantic shape/arrow vocabulary…
mermaid-diagram-patterns
Create Mermaid diagrams for technical documentation including ERDs, sequence diagrams, flowcharts, and architecture diagrams. Use when: (1) designing database schemas (ERD), (2) documenting API interactions (sequence), (3) illustrating process flows (flowchart), (4) visualizing system architecture.
mermaid-diagrams
Comprehensive toolkit for creating consistent, cognitively-optimized Mermaid diagrams following the Mermaid Diagram Guidelines (MDG) v1.0 standard. Use for creating flowcharts, system architectures, process flows, sequence diagrams, ERDs, state diagrams, Gantt charts, mindmaps, class diagrams, and conceptual maps.…