MIT-licensed agent skill that generates brand-matched diagrams as a single self-contained HTML + SVG file.
Updated EU status checked Last shown
Sources: the vendor's own pages (linked above) and creator videos at the linked timestamps. EU status is information, not legal advice; see how we check.
Diagram Design is an agent skill, published by Cathryn Lavery (LittleMight), that lets coding agents draw diagrams as one self-contained HTML file with inline SVG. The README lists about 50 diagram types (the repo description says 45), including architecture diagrams, flowcharts, sequence diagrams, state machines, timelines and quadrants. It avoids shadows and default Mermaid styling, and aims to prevent broken or overlapping arrows.
The user asks the agent in plain language, and the agent chooses a diagram type, states its plan and writes an .html file that opens in a browser. An onboarding step can take a website URL and pull its palette and fonts so later diagrams match the brand. The README also describes import from draw.io, Mermaid, Excalidraw and PlantUML, and export to PNG or SVG. The slash commands for these live in the native plugin packages.
It installs with npx skills add cathrynlavery/diagram-design and works with hosts that read Agent Skills, including Claude Code, Codex, GitHub Copilot, Cursor, Qoder, Gemini CLI, Cline, Windsurf and Amp. Claude Code, Codex and Copilot also have plugin marketplace installs, which give updates and commands. A PRIVACY.md file in the repo lists what the skill sends over the network. A YouTube creator reported installing it in Hermes Agent from the GitHub URL and generating a clean architecture diagram.
Watch the moment: the exact second top creators show it. Videos load only when you press play, via youtube-nocookie.com.
An agent skill that lets agents create clean diagrams (flowcharts, architecture charts, state machines, timelines, quadrants) without broken or overlapping arrows. The creator installed it in Hermes Agent from a GitHub URL and generated an architecture diagram of Hermes Agent that looked good.
Closest neighbours by meaning, not just by category.
Library
MIT-licensed pack of 25 engineering skills and slash commands for AI coding agents, covering spec through ship.
Library · Leonxlnx
Agent Skill that guides coding agents to build company websites with one design system, real photos and browser-checked output.
Library · Remotion
Agent skill that teaches AI coding assistants to build programmatic React videos and motion graphics with Remotion.
Library · Anthropic
Anthropic agent skill that steers Claude toward distinctive, intentional frontend design instead of generic AI-looking UI.
Agent
Open-source multi-agent framework that generates editable CAD parts and assemblies from text prompts using build123d.
Library
Open Markdown format for giving coding agents project instructions, like a README for agents.
