diagram-design

<source media="(prefers-color-scheme: dark)" srcset="docs/hero/hero-dark.webp">
<img alt="Diagram Design. Editorial diagrams your designer won't hate." src="docs/hero/hero-light.webp">

An agent skill that draws diagrams as one self-contained HTML + SVG file, in your brand.45 diagram types. No shadows. No Mermaid slop.

Website · Gallery · Changelog

Install · What it makes · Quickstart · Match your brand · Import · Export · Contributing

npx skills add cathrynlavery/diagram-design

Ask your agent in plain words:

• "Make me an architecture diagram of my app: frontend, backend, database, Redis cache."
• "I need a quadrant showing Q2 projects by impact vs effort."
• "Give me a sequence of a bearer call with token refresh on 401."
• "Onboard diagram-design to https://yoursite.com" (pulls your palette and fonts so every diagram after this one matches your site)

The agent picks the type, states its plan, and writes one .html file you can open by double-clicking.

---

Install

Works with any host that reads Agent Skills, including Cursor, Claude Code, Codex, GitHub Copilot, Gemini CLI, Cline, Windsurf and Amp:

npx skills add cathrynlavery/diagram-design

In Claude Code, the plugin marketplace gets you updates and the slash commands:

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

Official builds come only from this repository. LittleMight, Cathryn Lavery's company, publishes the plugin directory listings; a listing under any other name is an unofficial copy. PRIVACY.md lists what the skill sends over the network.

After installing, run /plugin, open Marketplaces, select diagram-design, and choose Enable auto-update. Claude Code disables auto-update by default for third-party marketplaces; after this toggle, it refreshes the marketplace and installed plugin in the background after startup. Run /reload-plugins when prompted, or let the next session load the update.

The cross-agent skills CLI resolves this repository, detects skills/diagram-design/SKILL.md, and installs the whole skill (references/, assets/, scripts/) into every host root you select, including Cursor's:

npx skills add cathrynlavery/diagram-design

---

GitHub에서 전체 내용 보기