2.0 新增 — 循环：带共享记忆中枢的飞轮。虚线表示回写。2.3 新增：语义系统模式和可选的无障碍动效，静态输出仍为默认。2.5.10 新增：十种布局语法 — 桑基图、鱼骨图、Wardley 地图、看板、用户旅程、部署图、依赖图、UML 类图、故事地图和数据库模式。为 Claude Code、Codex、Factory Droid、Pi 和兼容 Agent Skills 的宿主提供的编辑级图表类型。自包含 HTML + SVG。无阴影。无 Mermaid 粗制滥造。语义模式将行为与布局分开描述，因此队列、策略追踪或信任边界可以使用最接近的现有类型，而无需扩展类型数量。静态 HTML 仍为默认；可选动效可用于有序说明。该技能还可以按选定的格式、尺寸和细节级别重绘 draw.io、Mermaid 或 Excalidraw 源文件。不用 Figma。不用通用的圆角矩形。不用花 30 分钟挑颜色。项目网站：diagramdesign.dev
我为什么构建它
我在 littlemight.com 写作（同时兼职运营 BestSelf.co）。每次我需要一张图表——架构草图、流程图、最重要事项的金字塔图——我都会问 Claude，结果得到一个通用的圆角矩形东西，看起来和网站其他部分完全不搭。我要么和 Figma 搏斗 30 分钟，要么干脆跳过图表。所以我为它构建了一个 Claude Code 技能。编辑级品质的视觉类型，通过读取你的网站，在 60 秒内匹配你的品牌。最高质量的操作通常是删除。每个节点都要证明自己的存在价值。强调色保留给读者应该首先关注的 1–2 个事物。目标密度：4/10。
它能生成什么
每种视觉类型都提供三种静态变体：极简浅色、极简深色和完整编辑版。可直接在浏览器中打开任意一种。无需构建步骤、JavaScript 或外部图片依赖。
- 架构 — 组件 + 连接
- IT 现状 — 遗留格局 + 现代化
- 流程图 — 决策逻辑
- 时序图 — 随时间传递的消息
- 状态机 — 状态 + 转换
- ER / 数据模型 — 实体 + 字段
- 时间线 — 轴上的事件
- 泳道图 — 跨职能流程
- 象限图 — 双轴定位
- 雷达图 / 蜘蛛图 — 多轴比较
- 循环 / 飞轮 — 强化循环 + 共享中枢
- 嵌套 — 按包含关系分层
- 树形图 — 父级 → 子级
- 组织架构图 — 归属 + 路由
- 层叠图 — 堆叠抽象
- 韦恩图 — 集合重叠
- 金字塔 / 漏斗 — 排名层级或流失
- 柱状图 — 分类比较
- 矩形树图 — 按面积表示部分与整体
- 折线图 — 随时间变化的趋势
- 甘特图 — 时间线上的任务 + 阶段
- 散点图 — 分布 + 相关性
- 高层图 — 集群上的端到端技术栈
- 流程图 — 多角色顺序工作流
- Medallion — 多层数据存储
- 数据流 — 按角色划分的管道步骤
- DP 集成 — 来源 → 核心 → 消费者
- DP 安全矩阵 — 按角色的访问权限
- 桑基图 — 分流 + 合并的数量
- 鱼骨图 — 分组原因 → 一个结果
- Wardley 地图 — 价值链 × 演化
- 看板 — 按状态划分的进行中工作
- 用户旅程 — 阶段、行为 + 情绪
- 部署图 — 区域、主机 + 制品
- 依赖图 — 扇入、层级 + 循环
- UML 类图 — 类、操作 + 类型化关系
- 故事地图 — 主干 × 发布切片
- 数据库模式 — 物理表 + 列外键
- 极坐标图 — 循环量级 · 线性半径
- 瀑布图 — 累计总额 + 正负桥接
- 架构差异 — 之前 · 变更 · 之后的拓扑
- 爆炸轴测图 — 沿单一轴拆解部件
- 轴测平面图 — 一张图上的房间和建筑
- 热力图 — 每行 × 列单元格的值
架构差异通过一份包含新增、删除、变更、移动和重新连接对象的「之前 · 变更 · 之后」账本，比较同步的拓扑结构。参见其参考文档和订单履行示例。
爆炸轴测图以 2:1 二等角投影绘制单个对象，其部件以等间距抬起分离：手机拆解图、开箱图、应用技术栈、AI agent 技术栈或机械键盘。每个坐标都来自同一个投影函数，动画手机以组装状态打开并爆炸一次。参见其参考文档。
轴测平面图对单层楼或单个场地使用相同的投影：墙壁在桌面高度切割，使每个房间都能从单一视角读取，或者校园内的建筑按建设阶段标记。参见办公室楼层、校园、咖啡店、履行中心楼层、分阶段校园动画和参考文档。
v2.5.10 版本新增了十种布局语法。在 30 变体联络表中比较它们的浅色、深色和完整编辑版变体。
浏览在线画廊：cathrynlavery.github.io/diagram-design — 或在本地打开 skills/diagram-design/assets/index.html，通过浅色 / 深色 / 完整编辑版标签页浏览每张图表。
安装
官方构建仅来自此仓库。LittleMight，即 Cathryn Lavery 的公司，发布插件目录列表；以任何其他名称发布的列表均为非官方副本。PRIVACY.md 列出了该技能通过网络发送的内容。
Claude Code：
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design然后启用一次更新：运行 /plugin，打开 Marketplaces，选择 diagram-design，然后选择 Enable auto-update。Claude Code 默认对第三方市场禁用自动更新；切换此选项后，它会在启动后在后台刷新市场和已安装的插件。在提示时运行 /reload-plugins，或让下一个会话加载更新。
Codex：
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-designCodex 在启动时刷新已配置的 Git 市场。如需立即获取，运行 codex plugin marketplace upgrade diagram-design 并启动新会话。
GitHub Copilot：
copilot plugin marketplace add cathrynlavery/diagram-design
copilot plugin install diagram-design@diagram-designCopilot 安装共享的 Diagram Design 技能及其 doctor、export、import 和 profile 功能……