cathrynlavery diagram-design

Diagram Design

一个面向 Claude Code、Codex、Copilot、Cursor 等的 agent skill，可将编辑级图表绘制为一个自包含的 HTML+SVG 文件，采用你的品牌风格，并内置设计规则。44 种图表类型。无阴影。无 Mermaid 粗制滥造。

项目站点：diagramdesign.dev

用自然语言向你的 agent 提出请求：

• “为我的应用画一张架构图：前端、后端、数据库、Redis 缓存。”
• “我需要一个象限图，按影响 vs 投入展示 Q2 项目。”
• “给我一个 bearer 调用的时序图，包含 401 时的 token 刷新。”
• “将 diagram-design 接入 https://yoursite.com”（拉取你的调色板和字体，使此后的每张图表都与你的站点匹配）

agent 会选择图表类型、说明其计划，并写出一个可双击打开的 .html 文件。

安装

适用于任何可读取 Agent Skills 的宿主，包括 Cursor、Claude Code、Codex、GitHub Copilot、Gemini CLI、Cline、Windsurf 和 Amp：

npx skills add cathrynlavery/diagram-design

在 Claude Code 中，插件市场可为你提供更新和斜杠命令：

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

官方构建仅来自此仓库。LittleMight（Cathryn Lavery 的公司）发布插件目录列表；以任何其他名称发布的列表均为非官方副本。PRIVACY.md 列出了该 skill 通过网络发送的内容。

Claude Code：开启自动更新

安装后，运行 /plugin，打开 Marketplaces，选择 diagram-design，然后选择 Enable auto-update。Claude Code 默认对第三方市场禁用自动更新；开启此开关后，它会在启动后在后台刷新市场和已安装的插件。出现提示时运行 /reload-plugins，或让下一个会话加载更新。

Cursor、Cline、Gemini CLI、Windsurf、Amp、Zed、Warp、Roo、Kilo 及其他 Agent Skills 宿主

跨 agent 的 skills CLI 会解析此仓库，检测到 skills/diagram-design/SKILL.md，并将整个 skill（references/、assets/、scripts/）安装到你选择的每个宿主根目录中，包括 Cursor 的：

npx skills add cathrynlavery/diagram-design

当所选根目录解析为多个 skills 目录时，CLI 会询问安装方式并推荐 Symlink：一份规范副本，链接到每个根目录，这样后续更新可一次性到达所有位置。若希望每个宿主使用独立副本，请传入 --copy。若所选内容解析为单一目录，则会直接复制，因为此时区分没有意义。在符号链接不可用的情况下（未开启开发者模式的 Windows），CLI 会回退到复制，并报告它复制了哪些根目录。

这是一次独立安装，与下方的市场无关：它不会自动跟随市场更新。使用 npx skills update diagram-design 拉取已合并的更新。它也只安装 Agent Skill，因此 /export-diagram、/import-mermaid、/profile 和 /doctor 命令界面仍保留在原生包中。在拥有下方某个市场的宿主上，请优先使用市场。

一次性迁移：现有的独立 npx skills add 副本不会自动开始跟随 Codex 市场。请移除该独立副本，然后使用 Codex 市场命令。同样，请卸载个人 Cowork 副本，并从你组织的市场重新安装 Diagram Design。此后，市场版本升级将通过每个客户端的原生更新路径流转。

Codex

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

Codex 会在启动时刷新已配置的 Git 市场。若要立即获取，请运行 codex plugin marketplace upgrade diagram-design 并启动新会话。

GitHub Copilot

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

Copilot 会从现有仓库市场安装共享的 Diagram Design skill 及其 doctor、export、import 和 profile 能力。使用 copilot skill list（或在交互式会话中使用 /skills）确认发现，然后用自然语言请求图表。若要获取已合并的更新，请运行 copilot plugin marketplace update diagram-design，然后运行 copilot plugin update diagram-design@diagram-design。

Factory Droid

droid plugin marketplace add https://github.com/cathrynlavery/diagram-design
droid plugin install diagram-design@diagram-design --scope user

Droid 按 commit 而非 manifest 的显示版本跟踪 Git 插件。若要获取已合并的更新，请运行 droid plugin marketplace update diagram-design，然后运行 droid plugin update diagram-design@diagram-design --scope user，并启动新会话。

Claude Cowork（组织市场）

组织 GitHub 市场目前需要私有或内部仓库，因此请先将此公共仓库镜像到你组织拥有的仓库中。在 Organization settings → Plugins 中，选择 Add plugin → GitHub，连接该镜像，并从市场菜单启用 Sync automatically。当包含插件版本升级的 pull request 合并到镜像的默认分支时，自动同步会运行；直接推送不会触发 webhook。从生成的组织市场安装 Diagram Design。

Pi

pi install https://github.com/cathrynlavery/diagram-design

在打开的 Pi 会话中运行 /reload。Pi 会让该 skill 可用于匹配的图表请求；使用 /skill:diagram-design 显式调用它。Pi 还会加载 /export-diagram、/import-mermaid、/import-excalidraw、/profile 和 /doctor 提示模板。未固定版本的 Git 安装是有意为之：Pi 没有自动包刷新，因此请运行 pi update --extensions 拉取已合并的更新。

Kiro

从仓库子目录 URL 导入 Agent Skill：

https://github.com/cathrynlavery/diagram-design/tree/main/skills/diagram-design

Kiro 会将导入的 skills 复制到工作区的 .kiro/skills/ 或全局的 ~/.kiro/skills/，因此请重新导入 URL 以获取更新。

声明资源的自定义 agents 应包含 skill://diagram-design/