cathrynlavery / diagram-design
git clone https://github.com/cathrynlavery/diagram-design.git
🔥 on GitHub Trending today
Editorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, and Pi. 44 diagram types. Self-contained HTML + SVG. No shadows. No Mermaid slop.
—
stars, 24h
+6.6k
stars, 7 days · #12
—
stars, 30 days
59k
★ total · +13% this week
3.8k
forks · 43 open issues
Star history starts 2026-10-20; the chart appears after the second daily snapshot.
LanguageHTML
LicenseMIT
Created2026-04-16 (6mo ago)
Last pushtoday
Watchers152
OwnerUser
Seen on GitHub Trending
- 2026-10-20 — #1 weekly in html · +6,638 ★
- 2026-10-20 — #13 weekly · +6,638 ★
GitHub topics
Links
- GitHub: github.com/cathrynlavery/diagram-design
- Homepage: https://diagramdesign.dev
- Releases · Issues · Hacker News mentions
README excerpt
**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, Qoder, GitHub Copilot, Gemini CLI, Cline, Windsurf and Amp: [code] In Claude Code, the plugin marketplace gets you updates and the slash commands: [code] 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. Claude Code : turn on auto-update 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. Cursor , Cline, Gemini CLI, Windsurf, Amp, Zed, Warp, Roo, Kilo and other Agent Skills hosts 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: [code] 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`, `/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 standalo