What is it?
Diagram Design is a skill for coding agents. You describe the diagram in plain words ("an architecture with a frontend, a backend, a database and a Redis cache") and the agent writes a single .html file with the drawing as inline SVG. It installs with npx skills add cathrynlavery/diagram-design in any host that reads Agent Skills, Claude Code, Codex, Cursor and GitHub Copilot among them. The style is fixed: one accent color, 1px hairlines, no shadows, and every coordinate on a 4px grid.
Why is it interesting?
- 45 diagram types: architecture, sequence, state machine and data model, but also Gantt, Sankey, radar and quadrant charts, each in a light, dark and editorial variant.
- Your site's colors: give it a URL and the skill picks up the palette and fonts, checks WCAG AA contrast and shows a diff before it writes its tokens. A named profile per client keeps each project's branding separate.
- Redraws of existing diagrams: a draw.io, Mermaid or Excalidraw file is redrawn in this style along four dials (format, size, level of detail, audience). A ledger then lists what was merged, collapsed or dropped.
- A file that opens on its own: the static variants have no build step and no JavaScript, and the SVG carries a title and description that screen readers announce. SVG or PNG export covers Figma and slides.
- Checks in the repository:
self_check.pyvalidates a generated file, and CI checks the templates for overlaps, clipped text and contrast on Linux, Windows and macOS.
Good to know
Results depend on the model. The README says so: output quality follows the model you run it with, and the same prompt can lay out differently twice. The file is not an editable source format, with no text to diff in a pull request and no canvas to drag a box on. For diagrams kept in Git that change every sprint, the project itself points to Mermaid. Archify, another diagram skill, has the agent write a JSON source that it then compiles deterministically.
Google Fonts by default. According to the project's privacy policy, a diagram loads Instrument Serif, Geist and Geist Mono from Google Fonts every time it opens, which hands the viewer's IP address to Google; PNG and SVG exports make the same request. Asking for system fonts removes every network call. The skill has no server and no telemetry: prompts and files only go through your agent's provider.
Python for PNG export. PNG export runs through Playwright and Chromium, installed with pip install playwright && playwright install chromium, and self_check.py needs Python 3. The diagram itself opens in a browser with nothing to install.
No releases, one version number per merge. The repository, opened in April 2026, publishes no GitHub release or tag. After each merged pull request, a workflow bumps the version in the plugin manifests: the 2.6 line went from 2.6.0 on 20 August to 2.6.129 on 26 October 2026, with skipped numbers. That bot authored 120 of the 395 commits, and the project's author 134.