diagram

diagram is a skill for Claude Code, Codex from robinslange/learning-loop. It costs 54 tokens per session (1,098 once invoked), scanned A, original, Apache-2.0.

A skill for creating Excalidraw diagrams, which are editable drawings saved in Markdown files, for a personal knowledge vault. It can choose a concept from the conversation or use one supplied by the user.

In plain words
What is it for?
Creating and saving a diagram of a concept or process in the vault, with the option to embed it in a note.
Why use it?
It turns mechanisms and multi-step relationships into a visual diagram when written explanation would make them harder to follow.

Skill for Claude CodeCodex

Installs and runs on its own, but its text points at files inside its plugin — anything it tells you to read at a ${CLAUDE_PLUGIN_ROOT} path is only there once the plugin is installed. Installing the plugin gets both.

Part of the learning-loop plugin — 24 skills, 20 agents, 6 hooks shipped together

Install

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.

agentmods
npx agentmods add skills/robinslange/learning-loop/diagram
Any agent
npx skills add robinslange/learning-loop --skill diagram
Clone the repo
git clone --depth 1 https://github.com/robinslange/learning-loop

Made for: Claude Code, Codex.

Or install learning-loop, the plugin that ships this one along with the rest of its 24 skills, 20 agents, 6 hooks.

Wrote 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.

agentmods badge for diagram

README.md
[![agentmods](https://agentmods.dev/badge/skills/robinslange/learning-loop/diagram.svg)](https://agentmods.dev/skills/robinslange/learning-loop/diagram)
Your own site
<a href="https://agentmods.dev/skills/robinslange/learning-loop/diagram"><img src="https://agentmods.dev/badge/skills/robinslange/learning-loop/diagram.svg" alt="Measured on agentmods" height="20"></a>
Per session 54 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,098 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00054 $0.01098
Opus 5 $0.00027 $0.00549
Sonnet 5 $0.00011 $0.00220
Haiku 4.5 $0.00005 $0.00110

Measured 3d ago against content hash 9cd509973dc4, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

diagram 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 3d 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.

plugin/skills/diagram/SKILL.md · 115 lines

How it starts

The opening of the file, as written. The whole thing — 115 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Diagram: Excalidraw Generation

Overview

Generate an Excalidraw diagram and save it to the vault. Handles the full pipeline: determine what to diagram, build the JSON, write the file, and optionally embed it in a note.

When to Use

  • /learning-loop:diagram "concept or mechanism" -- user specifies what to diagram
  • /learning-loop:diagram -- infer from conversation context

Process

Step 1: Determine What to Diagram

If args provided: Use as the concept description.

If no args: Read recent conversation. Identify the most diagram-worthy concept -- a mechanism, pathway, feedback loop, multi-step process, or system architecture where relationships between parts matter more than the parts themselves.

Diagram gate -- check BEFORE proceeding:

  • Does the concept involve 3+ connected components?
  • Do arrows/connections carry meaning (causation, flow, dependency)?
  • Would prose obscure the relationships?

If the answer to all three is no, tell the user: "This works better as text/table -- no diagram needed." and stop.

Step 2: Load Diagram Rules

Read the diagram-rules agent file to get the full Excalidraw construction spec:

${CLAUDE_PLUGIN_ROOT}/agents-shared/diagram-rules.md

Follow every rule in that file. Key points:

  • .excalidraw.md format with empty ## Text Elements section
  • Soft fill colors: #a5d8ff (blue), #b2f2bb (green), #ffec99 (yellow), #ffc9c9 (red), #d0bfff (purple)
  • fontFamily: 5, roughness: 1
  • Descriptive string IDs, random seed integers
  • Do NOT include frameId, index, versionNonce, or rawText fields
  • Text width: ~10px/char at 16, ~13px/char at 20, ~16px/char at 28
  • Container width = text width + 60px padding
  • 30px minimum gap between element edges
  • 4-8 core elements. If more than 15, split or simplify.

Step 3: Plan the Layout

Before writing JSON, plan on paper:

  1. Identify elements: List the 4-8 core components
  2. Identify connections: What arrows connect what? Solid (direct) or dashed (indirect)?
  3. Choose pattern: Fan-out, convergence, timeline, cycle, assembly line, or diamond decision
  4. Choose layout direction: Left-to-right for sequences, top-to-bottom for hierarchies
  5. Calculate positions: Space elements 200px apart minimum, 30px gap between edges

Read the full file on GitHub · 115 lines

Changes

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.

  1. 3d ago First seen · 115 lines · 54 tokens per session scan A 9cd509973dc4

Subscribe to this mod's changes

diagram is a skill published in the GitHub repository robinslange/learning-loop (11 stars, last pushed 12d ago), licensed Apache-2.0. It adds 54 tokens to every session and 1,098 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-08-30.

Related

Other skills, from other repositories

ss-learn

Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or brand data. Use when a person asks StyleSeed to remember, learn from, generalize, review, or prepare a reusable rule…

bitjaru/styleseed · 73 tokens

bmad-correct-course

Assess the impact of a significant change during sprint execution across the PRD, epics, architecture, and UX documents, and produce a sprint change proposal. Use when the user says "correct course" or "propose sprint change".

bmad-code-org/BMAD-METHOD · 53 tokens

docs-workflows

Documentation and extension workflows derived from local slash commands (docs, explanation, issues, prototypes, tutorials, MCP design review).

TencentCloudBase/CloudBase-AI-Toolkit · 28 tokens

Accessibility Manual Audit

Teach agents to guide manual accessibility audits for keyboard, screen reader, zoom, reflow, focus, and WCAG 2.2 criteria that scanners miss.

PramodDutta/qaskills · 36 tokens

github-a11y-scanner

Integration patterns for the GitHub Accessibility Scanner Action (github/accessibility-scanner). Teaches agents how to detect scanner presence, parse scanner-created issues, correlate findings with local scans, and track Copilot-assigned fix status.

Community-Access/accessibility-agents · 52 tokens

lighthouse-scanner

Integration patterns for Lighthouse CI accessibility auditing. Teaches agents how to detect Lighthouse CI configuration, parse accessibility audit results, map findings to the standard severity model, correlate with local axe-core scans, and track score regressions.

Community-Access/accessibility-agents · 49 tokens