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 bdmorin/the-no-shop --skill excalidraw-diagramgit clone --depth 1 https://github.com/bdmorin/the-no-shopWrote 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/bdmorin/the-no-shop/excalidraw-diagram)<a href="https://agentmods.dev/skills/bdmorin/the-no-shop/excalidraw-diagram"><img src="https://agentmods.dev/badge/skills/bdmorin/the-no-shop/excalidraw-diagram/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/bdmorin/the-no-shop/excalidraw-diagram"><img src="https://agentmods.dev/badge/skills/bdmorin/the-no-shop/excalidraw-diagram.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.00048 | $0.05892 |
| Opus 5 | $0.00024 | $0.02946 |
| Sonnet 5 | $0.00010 | $0.01178 |
| Haiku 4.5 | $0.00005 | $0.00589 |
Grade B, and why
excalidraw-diagram scanned grade B with 1 finding 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.
Subtle steeringmediumPrompt injection
Instructions that bias recommendations or shape behaviour without the user noticing.
- **Don't write a Python generator script.** The templating and coordinate math seem helpful but introduce a layer of indirection that makes debugging harder. Hand-crafted JSON with descriptive IDs is more maintainable. This is a copy
94% identical to excalidraw-diagram — 190 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 613 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Excalidraw Diagram Creator
Generate .excalidraw JSON files that argue visually, not just display information.
Locating Plugin Files
This skill's reference files and rendering tools are in the references/ directory at the plugin root. To find them:
Glob: **/excalidraw-diagram/references/color-palette.md
Read the first match's parent directory to locate all reference files:
color-palette.md-- Single source of truth for colors and brand styleselement-templates.md-- JSON templates for each Excalidraw element typejson-schema.md-- Element types, common properties, binding formatrender_excalidraw.py-- Python/Playwright renderer (.excalidraw -> PNG)share_excalidraw.py-- Upload to excalidraw.com, returns shareable URL (E2E encrypted)render_template.html-- HTML template used by the rendererpyproject.toml-- Python dependencies (playwright, cryptography)
Read color-palette.md before generating any diagram. It is the single source of truth for all color choices -- shape fills, strokes, text colors, evidence artifact backgrounds, everything.
Customization
To make this skill produce diagrams in your own brand style, edit color-palette.md. Everything else in this file is universal design methodology and Excalidraw best practices.
Core Philosophy
Diagrams should ARGUE, not DISPLAY.
A diagram isn't formatted text. It's a visual argument that shows relationships, causality, and flow that words alone can't express. The shape should BE the meaning.
The Isomorphism Test: If you removed all text, would the structure alone communicate the concept? If not, redesign.
The Education Test: Could someone learn something concrete from this diagram, or does it just label boxes? A good diagram teaches -- it shows actual formats, real event names, concrete examples.
Depth Assessment (Do This First)
Before designing, determine what level of detail this diagram needs:
Simple/Conceptual Diagrams
Use abstract shapes when:
- Explaining a mental model or philosophy
- The audience doesn't need technical specifics
- The concept IS the abstraction (e.g., "separation of concerns")
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 · 613 lines · 48 tokens per session scan B 4208fb81e919
excalidraw-diagram is a skill published in the GitHub repository bdmorin/the-no-shop (10 stars, last pushed 5mo ago), licensed MIT. It adds 48 tokens to every session and 5,892 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it B with 1 finding (subtle steering). It is 94% identical to excalidraw-diagram, differing in 190 lines, and is treated as a copy.
Other skills, from other repositories
apple-design
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading)…
real-prototype
Implement several variations of a design directly inside the running app, on the real page/route, with a live switcher to toggle between them in the browser, then recommend one and fold the winner into the real code. Variants are real implementations judged against real data, layout, and density (not an isolated…
remove-ai-slop
Audit UI, docs, or prose for AI-generated tells in design and copy, then fix approved findings. Use when the user says de-slop, slop check, "looks AI-generated", or wants copy humanized.
swimlanes
Generate sequence diagrams using Swimlanes.io syntax.
vast-ai-gpu-cloud
Safely inspect and operate Vast.ai marketplace instances with the vastai CLI, live offer data, and explicit approval before paid or destructive actions.
diagrams
Mermaid diagrams following the C4 model: context, container, component, sequence, ER and deployment. Use when saying "diagram", "visualize", or "architecture diagram".