C
cathrynlavery/diagram-design
Editorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Qoder, and Pi. 45 diagram types. Self-contained HTML + SVG. No shadows. No Mermaid slop.
在 GitHub 查看 ↗链接已于 2026-11-12 核查 · HTTP 200 · 打开的是厂商自己的官网
安装与配置
客户端配置（取自该仓库的安装命令）
{
"mcpServers": {
"cathrynlavery-diagram-design": {
"command": "npx",
"args": ["skills"]
}
}
}解析自我们于 2026-10-26 抓取的该仓库 README；我们未执行过。
command/args 来自仓库写明的安装命令；不确定时请以该项目 README 为准。
VS Code（.vscode/mcp.json —— 键名是 servers）
{
"servers": {
"cathrynlavery-diagram-design": {
"command": "npx",
"args": ["skills"]
}
}
}VS Code 顶层键是 <code>servers</code>，其余与上面那份相同。
Claude Code（命令行）
claude mcp add --transport stdio cathrynlavery-diagram-design -- npx skills
Claude Code 不收 JSON 文件，用这条命令直接加。
配置项的键名以你的客户端为准：客户端与 CLI
- ★ 数取值
- 66,873 ★ · cathrynlavery/diagram-design · 取自 GitHub 搜索 API · （2026-11-13 20:00:50 核对）
- 来源明细
- 从该仓库的 GitHub 页面直接读取 · 条目类型：开源项目
- 收录与活跃
- 收录于 2026-10-26 · 最近见到 2026-11-11 · 共见到 11 次 · 被 1 个来源列出
- 安装
npx skills
常见问题（答案都来自我们的记录）
怎么安装？
该仓库给出的安装命令是
npx skills。我们的记录里它是仓库自己提供的；不保证在你的客户端上直接可用。它适合谁 / 用来做什么？
我们还没有为它记录标签。
谁维护它、还在更新吗？
仓库
cathrynlavery/diagram-design；我们收录于 2026-10-26；最近见到 2026-11-11。这里没有"官方认证"或"质量评级"——我们只记录来源与时间。An agent skill that draws diagrams as one self-contained HTML + SVG file, in you
以下摘录自该仓库的 README（片段） · 在 GitHub 读完整 README →
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:
bash
npx skills add cathrynlavery/diagram-design
In Claude Code, the plugin marketplace gets you updates and the slash commands:
text
/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.
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:
bash
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, /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.
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:
bash
npx skills add cathrynlavery/diagram-design
In Claude Code, the plugin marketplace gets you updates and the slash commands:
text
/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.
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:
bash
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, /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.
收录徽章（可选）
想把收录标记放进 README 就复制这行，可选，不影响收录。
[](https://anclum.com/zh/s/cathrynlavery-diagram-design/)
- 来源
- github · https://github.com/cathrynlavery/diagram-design
- Traction
- 66,873 ★
- 收录于
- 3 天前