An agent skill that draws diagrams as one self-contained HTML + SVG file, in your brand.50 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, Qoder, 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
When the selected roots resolve to more than one skills directory, the CLI asks for an installation method and recommends Symlink: one canonical copy, linked into each root, so a later update reaches all of them at once. Pass --copy for independent copies per host instead. A selection that resolves to a single directory is copied, because the distinction is immaterial there. Where symlinks are unavailable (Windows without Developer Mode) the CLI falls back to copies and reports which roots it copied.
This is a standalone install, separate from the marketplaces below: it does not follow marketplace updates automatically. Pull merged updates with npx skills update diagram-design. It also installs the Agent Skill only, so the /export-diagram, /import-mermaid, /import-plantuml, /profile, and /doctor command surfaces stay with the native packages. On a host that has one of the marketplaces below, prefer the marketplace.
One-time migration: an existing standalone npx skills add copy will not start following the Codex marketplace automatically. Remove that standalone copy, then use the Codex marketplace commands. Likewise, uninstall a personal Cowork copy and reinstall Diagram Design from your organization's marketplace. Future marketplace version bumps then flow through each client's native update path.
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design
Codex refreshes configured Git marketplaces at startup. To fetch immediately, run codex plugin marketplace upgrade diagram-design and start a new session.
Clone the repository, validate the native plugin, and install it locally:
git clone https://github.com/cathrynlavery/diagram-design.git
qoder plugins validate ./diagram-design
qoder plugins install ./diagram-design
qoder plugins list
Qoder loads the canonical skills/diagram-design/ tree and the shared command
definitions directly; no Qoder-specific copy is maintained. For Qoder IDE,
build a bounded ZIP from the tracked plugin surfaces and import it through
Extensions → Plugins → Add Plugins → Upload Plugin:
git -C diagram-design archive --format=zip \
--output=../diagram-design-qoder.zip HEAD \
.qoder-plugin commands skills LICENSE
Start a new task after installing or updating the plugin.
copilot plugin marketplace add cathrynlavery/diagram-design
copilot plugin install diagram-design@diagram-design
This is the beginning of the README. Read the rest at the original. Read the full README ↗
