AI PICKS / AGENT SKILL
diagram-design
Create editorial diagrams as standalone HTML and SVG, including architecture, flows, timelines and data models. Supports Claude Code, Codex and other Agent Skills hosts.
cathrynlavery/diagram-designBefore you start: use an agent supporting Skills. AI Picks has not independently verified every runtime. Requirements & license ↗ · Installation guide
Add to your agent
npx skills add cathrynlavery/diagram-design --skill diagram-designRun in your terminal and choose an agent supporting Skills. Some skills require additional runtimes; see the repository.
Try this prompt
Use diagram-design to explain a web app with frontend, API and database. Make a minimal light HTML diagram with clear labels and SVG connections.An editorial usage example, not an execution result.
Frequently asked questions
What does diagram-design help with?
Create editorial diagrams as standalone HTML and SVG, including architecture, flows, timelines and data models. Supports Claude Code, Codex and other Agent Skills hosts.
How do I install diagram-design?
Run this command in your terminal. Read the source file and repository instructions first.
npx skills add cathrynlavery/diagram-design --skill diagram-designWhich agents can use diagram-design?
Check that your agent supports SKILL.md. Some skills also require extra tools or runtimes; consult the author's repository for requirements. View source repository ↗
Know before you use
- Pricing & licensing
- Check the publisher for current pricing and licensing. AI Picks does not sell this resource.
- Compatibility
- Consult the publisher; AI Picks has not independently verified every runtime.
- Source review date
This is an editorial resource listing. Features and compatibility have not all been independently verified; consult the source before use.
Machine-readable details · JSONSee it in action
Browse the official diagram gallery and examples.
Source: cathrynlavery/diagram-design official examplesOpen official examples