图表设计资源集

概述

Diagram Design 是一个面向 AI 编程代理（Agent）的图表生成技能。它接收用户的自然语言描述，自动选择图表类型并生成一个自包含的 HTML + 内联 SVG 文件，输出可直接双击打开，无需构建步骤、JavaScript 运行时或外部图片依赖。内置 45 种图表类型与三种静态变体（浅色极简、深色极简、完整编辑风），并支持与品牌视觉系统对齐。

与同类工具的差异

工具	制作方式	布局	视觉风格	输出
Mermaid / PlantUML	写文本	自动	渲染器内置主题	文本源（GitHub 直接渲染）
draw.io / Excalidraw	手工拖拽	手动	自绘	可编辑 .drawio / .excalidraw 文件
Diagram Design	描述给 Agent	代理放置于 4px 网格，CI 检查重叠与裁剪	编辑风格统一，可对接品牌色板	单 HTML（含内联 SVG），可导出 SVG / PNG

需要说明的限制：输出质量受底层模型影响，相同提示两次布局可能略有差异；产物不是可编辑的源码格式，没有文本可 diff，也没有画布可拖拽。对于存放在 Git 中、需要频繁随迭代修改的图表文档，Mermaid 仍是更合适的工具；本技能定位于“准备公开发布”的成品图。

典型用例

• 架构图：前端、后端、数据库、Redis 缓存。
• 二维矩阵：按影响力与投入度对 Q2 项目排布。
• 时序图：演示携带 Token 调用在 401 时刷新。
• 品牌对齐：执行 onboard diagram-design to https://yoursite.com，自动抽取站点色板与字体栈。

快速开始

通用安装（Cursor、Claude Code、Codex、Qoder、GitHub Copilot、Gemini CLI、Cline、Windsurf、Amp 等）：

# 通过跨 Agent 的 skills CLI 安装
npx skills add cathrynlavery/diagram-design

Claude Code 插件市场（可获得自动更新与斜杠命令）：

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

Codex：

codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design
# 立即拉取更新
codex plugin marketplace upgrade diagram-design

GitHub Copilot：

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

Qoder IDE：

git clone https://github.com/cathrynlavery/diagram-design.git
qoder plugins validate ./diagram-design
qoder plugins install ./diagram-design

Factory Droid：

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

Claude Cowork 组织市场：需先将公开仓库镜像到组织拥有的私有仓库，在 Organization settings → Plugins 中添加 GitHub 源并启用 Sync automatically。

可编辑安装（用于自定义 references/style-guide.md）：

git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design

# Claude Code：将内部 skill 目录软链到宿主根
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design

# 其他 Agent Skills 宿主可按需创建软链
mkdir -p ~/.agents/skills ~/.cursor/skills ~/.cline/skills ~/.kiro/skills \
         ~/.config/opencode/skills ~/.copilot/skills
ln -s ~/code/diagram-design/skills/diagram-design ~/.agents/skills/diagram-design
ln -s ~/code/diagram-design/skills/diagram-design ~/.cursor/skills/diagram-design
# ……其余宿主同理

品牌对齐流程

技能默认采用“墨黑 + 橘色”色板（白烟纸、墨黑墨色、降低饱和度的橘色重点色、蓝灰次要色、银色发丝线）。一次性 onboarding 可将其替换为自有品牌：

用户： "onboard diagram-design to https://yoursite.com"
代理： → 抓取首页
      → 抽取主色板与字体栈
      → 映射到语义角色：paper / ink / muted / accent / link
      → 展示差异
      → 写入 references/style-guide.md
用户： "yes, apply it"

抽取的字段映射示例：

站点来源	写入角色
<body> 背景色	paper
主文本色	ink
次要 / 标题副文本	muted
卡片或容器色	paper-2
最常用的品牌色（CTA / 链接 / 标题）	accent
<h1> 字体族	title
<body> 字体族	node-name
<code> / <pre> 字体族	sublabel

写入前会自动校验 WCAG AA 对比度：ink 落在 paper 上需通过 4.5:1，关键标识需通过 3:1。CI 同时约束默认皮肤在浅色与深色背景下均满足此契约。模板默认具备无障碍属性（role="img"、aria-labelledby、首子 <title> / <desc>），ID 按图与变体加前缀，避免同页内联多张 SVG 时名称冲突。

字体网络行为：默认从 Google Fonts 加载 Instrument Serif、Geist、Geist Mono，是图表唯一的网络请求；若在样式指南中将字体源设置为 system，则完全离线运行，回退到平台自带衬线 / 无衬线 / 等宽字体栈。

首次使用闸门：新项目中若 style-guide.md 仍为默认，技能会暂停并询问：执行 onboarding、手动粘贴 token，还是继续使用默认皮肤。

内置图表类型（节选）

45 种类型涵盖：Architecture、IT current-state、Flowchart、Sequence、State machine、ER、Timeline、Swimlane、Quadrant、Radar、Loop、Nested、Tree、Org chart、Layer stack、Venn、Pyramid、Bar chart、Treemap、Line chart、Gantt、Scatter plot、High-Level、Process、Medallion、Data flow、DP integration、DP security matrix、Sankey、Fishbone、Wardley map、Kanban、User journey、Deployment、Dependency graph、UML class、Story map、Database schema、Polar chart、Waterfall、Architecture delta、Exploded axonometric、Axonometric plan、Heatmap、Service blueprint 等。

部分类型有命名变体共用同一参考文档：Line 覆盖 slopegraph / ridgeline / streamgraph / bump；Scatter 覆盖 bubble / beeswarm；Treemap 覆盖 marimekko。

几个具备专门参考与示例的复杂类型：

• Architecture：可在同一张图中嵌套行政带与流量框，虚线 rx=4 表示计费 / 权限带，实线 rx=8 表示网络段，托管服务画在所有子网之外。
• Architecture delta：Before · Changes · After 三栏对照，记录新增、删除、变更、移动、改接的对象；纯属性对比仍以表格呈现，单一快照使用 Architecture。
• Exploded axonometric：以 2:1 二维等轴测投影展开单一对象，所有坐标来自同一投影函数；可生成电话拆解、开箱、应用栈、AI 代理栈、机械键盘等示例，并支持组装→爆炸的动画。
• Axonometric plan：同一投影绘制单层或单站点平面；墙体在桌面高度被裁切，使每个房间在单一视角中清晰可读，亦可标注建筑分期。

完整可交互画廊见 skills/diagram-design/assets/index.html，每个类型编号 01 至 44，变体与示例使用相同编号加字母后缀。