这个 Skill 是做什么的

让智能体画图，出来的通常是 Mermaid 那种满屏方框连线——能看，但放不进文档和演示。Diagram Design 是给 Claude Code、Codex、Factory Droid、Pi 等宿主用的 Agent 技能，输出自包含 HTML + SVG 的「编辑级」图：架构图、流程图、时序图、数据流、飞轮与看板等十来种版式，不带阴影、不靠模板堆装饰。它把「行为」用语义模式单独描述、与版式解耦，所以队列、策略轨迹、信任边界这类概念可以复用最近的既有版式，而不用无限增加图类型。2.5.10 版新增桑基图、鱼骨图、Wardley 图、看板、用户旅程、部署图、依赖图、UML 类图、故事地图与数据库 schema；也能把 draw.io、Mermaid、Excalidraw 的源文件按指定格式与尺寸重绘。静态 HTML 是默认输出，需要按顺序讲解时可开动效。

基本信息

  • 完整名称：Diagram Design（让智能体画出设计师不会嫌弃的架构图）
  • 分类：设计与多媒体
  • 作者 / 来源：cathrynlavery（开源，MIT）
  • 价格：免费（开源，MIT）
  • 更新日期：2026-09-19
  • 项目主页：github.com

适用场景

Agent Skills · 架构图 · SVG

安全审计结论

🛡️ 已审计：静态扫描未发现高危特征

  • 已扫描 9 个文件（技能说明、安装/运行脚本、普通代码）
  • 审计日期：2026-09-26
  • 静态评分：88 / 100

命中特征：

  • 安装全局依赖（npm i -g / pip install）

口径说明：这是对仓库内可执行内容的静态特征扫描，外加开源许可、维护活跃度等公开信誉信号，不是杀毒引擎，也不能替代你自己核对源码。标记为「已审计」只代表扫过的这批文件里没发现高危写法。完整口径与全站审计明细 →

如何安装

来源：GitHub 开源仓库。克隆命令：git clone https://github.com/cathrynlavery/diagram-design.git

  1. 在终端执行下面的克隆命令，把仓库拉到本地。
  2. 按仓库 README 找到 Skill 目录（通常在根目录，或 skills / agents 这类子目录）。
  3. 把该目录整体复制到你的 Agent 技能目录 —— Claude Code 是 ~/.claude/skills/，其它 Agent 以各自文档为准。
  4. 重启或刷新 Agent，让它重新扫描技能目录，然后按技能名调用。

仓库地址：github.com/cathrynlavery/diagram-design

同类 Skills