Author an editorial HTML+SVG diagram with the Diagram Design kit - choose the visual type, read its reference, start from an example, and satisfy the safety and accessibility contract that diagram_write({kind:"html"}) enforces.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# Diagram Design
The `dsh-diagrams` plugin vendors the **Diagram Design kit**: 71 example keys,
204 self-contained HTML+SVG examples, and 62 reference documents, from
<https://github.com/cathrynlavery/diagram-design> (MIT, pinned by commit). This
skill is how to use it well. Everything it names is on disk inside the plugin and
is reachable through the `diagram_kit` tool - read it there rather than from
memory, because the kit is the authority on its own conventions.
## The one-sentence rule
**A diagram is a document: one HTML file, one inline SVG, no shadows, no
network, no script except the kit's motion controller.** If a picture needs a
library, a webfont URL or a shadow to work, it is not a diagram in this system.
## The workflow, in order
1. **Catalog first** — `diagram_kit({action:"catalog"})` lists the 71 keys. The
44 marked with `*` have a written type reference; the rest are named
variations of a documented family (`bubble` is `scatter`, `marimekko` is
`treemap`) or importer demos.
2. **Read the shared rules once** — `diagram_kit({action:"reference",
ref:"style-guide"})`. It carries the colour tokens, the type scale and the
…
The line at the top of this page pins the label git:20261011.90817e1, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
GET https://markdownregistry.com/api/v1/artifacts/art_n65xgslfkt7zu2hd
GET https://markdownregistry.com/api/v1/resolve?ref=vecnode/vncode/diagram-design
GET https://markdownregistry.com/api/v1/blob/32f4d1555af6352f8432e9c8f91ef4c606de0728d4f49d9422a73360a1b4901f
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
vecnode/vncode · packages/dsh-browser/skills/web-render/SKILL.md · Render a web page on the host and measure it - screenshots, computed styles, element boxes and post-script text - when…
vecnode/vncode · packages/dsh-diagrams/skills/mermaid-diagrams/SKILL.md · Author Mermaid diagrams that parse the first time: choose the right diagram type for the question, write syntax the…
vecnode/vncode · packages/dsh-diagrams/skills/tikz-diagrams/SKILL.md · Author TikZ/LaTeX diagrams that compile: use the host's prepared preamble, the right libraries, layout and plot…
vecnode/vncode · packages/dsh-docker/skills/docker-cli/SKILL.md · Control this machine's Docker or Podman engine through the docker_* tools - read the engine's state first, list…
vecnode/vncode · packages/dsh-frontend-craft/skills/frontend-craft/SKILL.md · Use when the user wants to design, redesign, shape, critique, audit, polish, simplify, harden, animate, or otherwise…
vecnode/vncode · packages/dsh-media/skills/ffmpeg-cli/SKILL.md · Drive ffmpeg through the media_run tool as an argv array - remux instead of re-encode, map streams explicitly, trim at…
vecnode/vncode · packages/dsh-media/skills/ffprobe-cli/SKILL.md · Read a media file's real structure with ffprobe through media_run - the JSON invocation and how to read it, what every…
vecnode/vncode · packages/dsh-ollama/skills/ollama-api/SKILL.md · The Ollama REST API as it is on this machine - /api/generate and /api/chat with streaming NDJSON, /api/embed vs the…
vecnode/vncode · packages/dsh-ollama/skills/ollama-inference-metrics/SKILL.md · What every Ollama timing field means and the arithmetic that turns it into a claim - tokens per second…
vecnode/vncode · packages/dsh-ollama/skills/ollama-python/SKILL.md · The `ollama` Python package used properly - chat and generate with streaming, embeddings, tool calling, structured…
vecnode/vncode · packages/dsh-pdf/skills/pdf-analysis/SKILL.md · Read and understand PDF documents with the pdf_* tools - inspect a document before reading it, extract text in reading…
vecnode/vn-code · packages/dsh-diagrams/skills/diagram-design/SKILL.md · Author an editorial HTML+SVG diagram with the Diagram Design kit - choose the visual type, read its reference, start…
dannykkh/skill-olympus · skills/diagram-design/SKILL.md · 에디토리얼 품질 다이어그램 표현 계층. 파이프라인 .mmd(flowchart/sequence/state/ER) 또는 자연어 설명을 브랜드 토큰 기반 self-contained HTML + inline SVG로…
coolxeo/grok-bot-skills · skills/design/diagram-design/SKILL.md · use this when creating explainer diagrams (architecture, sequence, process, cards for posts) as HTML/SVG/PNG so they…
