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 OutlineDriven/outline-driven-development --skill embed-diagramgit clone --depth 1 https://github.com/OutlineDriven/outline-driven-developmentWrote 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/outlinedriven/outline-driven-development/embed-diagram)<a href="https://agentmods.dev/skills/outlinedriven/outline-driven-development/embed-diagram"><img src="https://agentmods.dev/badge/skills/outlinedriven/outline-driven-development/embed-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/outlinedriven/outline-driven-development/embed-diagram"><img src="https://agentmods.dev/badge/skills/outlinedriven/outline-driven-development/embed-diagram.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00060 | $0.01301 |
| Opus 5 | $0.00030 | $0.00651 |
| Sonnet 5 | $0.00012 | $0.00260 |
| Haiku 4.5 | $0.00006 | $0.00130 |
Grade A, and why
embed-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 5d 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 — 50 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Embed diagram
Contract
| Field | Bound contract |
|---|---|
| Trigger | The user runs /embed-diagram or asks to render a Mermaid diagram offline and embed it into a document. |
| Authority | Reversible local writes: create or overwrite Mermaid source, SVG, PNG, and Excalidraw files in the output directory and edit the target document to embed the render. No remote, credential, VCS, or published mutation. |
| Side effect | Local SVG or PNG diagram renders written to the output directory and embedded into the target document. |
| Done | A rendered diagram is embedded in the target document. |
Inputs
- A diagram request: an English description of the structure to diagram, or Mermaid source. Required.
- A target document path. Required. The document must exist and be writable.
- Output directory. Optional. Default
./diagrams/when the cwd is a git repo, else/tmp/gstack-diagrams/. - Output slug. Optional. Derived kebab-case from the diagram subject, 40 chars or fewer.
Procedure
- Bound scope. Confirm the target document path exists and is writable. Decide the output directory and slug. Do not write outside the output directory or the target document. Done when: the target document is confirmed writable and the output directory and slug are decided.
- Author Mermaid from the request. Prefer
graph LRfor pipelines and flows, andgraph TDfor hierarchies. Keep node labels short; put detail in edge labels. The readable range is 5 to 15 nodes. If the request needs more, split it into multiple diagrams and explain why. Flowcharts convert to a fully editable Excalidraw scene. Sequence, state, gantt, and other Mermaid types render to SVG and PNG but skip the Excalidraw artifact. Done when: Mermaid source is authored within the readable node range, or split into multiple diagrams with a reason. - Write the Mermaid source to
<outdir>/<slug>.mmd. The source is the single source of truth. Done when: the.mmdfile is written. - Check the local renderer toolchain. Verify
mmdc(mermaid-cli) is installed and executable. If not, stop and tell the user to install it:npm install -g @mermaid-js/mermaid-cli. Do not improvise a CDN or remote fallback. Offline is the contract. Done when:mmdcis confirmed executable, or the run stops with the install instruction. - Render SVG. Run
mmdc -i <outdir>/<slug>.mmd -o <outdir>/<slug>.svg. If the command fails, show the parse error to the user, fix the Mermaid source, and retry. Done when: the.svgfile is written. - Rasterize PNG. Run
mmdc -i <outdir>/<slug>.mmd -o <outdir>/<slug>.png -w <width>where width is computed as placed width in inches times 300. Done when: the.pngfile is written. - For flowcharts only, generate an Excalidraw scene. If the local toolchain supports Mermaid-to-Excalidraw conversion (check for
@mermaid-js/mermaid-cliExcalidraw support or a local converter script), run the converter with the Mermaid source and write the scene JSON to<outdir>/<slug>.excalidraw. For other Mermaid types, skip the Excalidraw artifact and tell the user: sequence and other non-flowchart diagrams render but are not Excalidraw-editable yet. Done when: the.excalidrawfile is written for flowcharts, or the limitation is stated for other types. - Embed the rendered SVG (preferred for documents) or PNG into the target document at the requested location. Done when: the render is embedded in the target document.
- Show the PNG to the user, list the artifact paths, and note that the
.excalidrawfile opens at excalidraw.com for editing. Done when: the PNG is shown and artifact paths are listed. - For changes, edit the
.mmdsource and re-run rendering from step 5. To re-render an edited.excalidrawscene from a user round-trip, load the scene file and export to SVG and PNG without touching the Mermaid. Done when: the change cycle is documented for both Mermaid and Excalidraw round-trips.
What ships with it
1 file 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.
- 5d ago First seen · 50 lines · 60 tokens per session scan A 2871132489b6
embed-diagram is a skill published in the GitHub repository OutlineDriven/outline-driven-development (52 stars, last pushed 3d ago), licensed Apache-2.0. It adds 60 tokens to every session and 1,301 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
kami-landing
Produce a print-grade single-page kami (紙 / 纸) document — warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool grays. The output reads like a professional white paper or studio one-pager, not an app UI. Multilingual by design (EN · zh-CN · ja). One self-contained HTML file, zero dependencies.
applying-brand-guidelines
This skill applies consistent corporate branding and styling to all generated documents including colors, fonts, layouts, and messaging.
accessibility-pass
Use this skill whenever the user asks to check, review, or fix the accessibility of a PowerPoint deck, Word document, HTML page, or Markdown file, and before handing over any deck or document this agent just generated, so it does not ship with missing alt text, untitled slides, or unreadable colour contrast.
diagram-contract
Use when a diagram is going into a document: pick the tool, write the text source, render it, and embed it with an accessible caption. Text DSL plus a committed SVG is the shape — nomnoml for structure and flow, D2 for architecture, the house palette on both.
extract-tikz
Extract TikZ diagrams from Beamer source, compile to PDF, convert to SVG with 0-based indexing. Use when updating TikZ diagrams for Quarto slides.
design
Use when starting UI work, defining palettes or tokens, fixing AI-generic UI, or persisting a design system to DESIGN.md (modes: implement, persist). Not for live URLs: use web-design-review.