diagram-design
面向编程智能体的图表设计 agent skill，以散文式风格指南和规则为核心，支持44种图表类型，输出内联SVG的HTML文件，强调设计品味与可访问性
时间轴 (近 90 天)
diagram-design 的已知边界：默认风格指南下首次运行会暂停询问品牌信息；字体默认来自 Google，--offline 标志会拒绝加载它们的文件；PNG 导出需要 Playwright 和 Chromium。
diagram-design 周日登上 GitHub Trending 第 4 名，单日新增 1083 星，累计 50933 星。
diagram-design 能绘制 44 种图表类型，输出单个内联 SVG 的 HTML 文件，支持重绘 Mermaid、draw.io 和 Excalidraw 源文件，并带有从用户网站提取配色和字体的引导步骤。
diagram-design 的 SKILL.md 大小为 30.5 KB，CI 将其限制在 40000 字节以内，因为每次调用都会完整加载到上下文窗口。
diagram-design 的 references/ 目录包含 62 个 Markdown 文件，合计约 710 KB；assets/ 包含 204 个示例图和模板；scripts/ 有五个仅用标准库的 Python 文件。
diagram-design 的风格规则包括：超过九个节点就拆分；强调色只用在一两个元素上；禁止阴影；所有连接线都是直角折线，不用斜线；结构几何对齐 4px 网格；不要照搬 Mermaid 的自动布局。
用一个短 Node 脚本扫描 diagram-design 的全部 204 个示例后发现：唯一的外部主机是 fonts.googleapis.com；十个文件含 script，全是动画变体；文件大小中位数 12.6 KB，最大的是一个 208 KB 的动画爆炸键盘图。
diagram-design 内置的 export_svg.py 能把 208 KB 的示例转成 8703 字节的独立 SVG，id 加了前缀，便于与其他图表共处一页。
diagram-design 的导入脚本只解析文本，从不渲染或抓取；导入器只读流程图、序列图、状态图和 ER 图，拒绝甘特图、时间线、旅程图、桑基图和象限图。
diagram-design 的对抗性样例将 'IGNORE ALL PREVIOUS INSTRUCTIONS' 藏在节点标签里，提取器将其保留为转义文本，并丢弃了四条样式指令和点击处理器。
还有 16 条时间轴事件
全部知识事实 (20)
diagram-design 的已知边界：默认风格指南下首次运行会暂停询问品牌信息；字体默认来自 Google，--offline 标志会拒绝加载它们的文件；PNG 导出需要 Playwright 和 Chromium。
50%待验证GitHub 上的 diagram-design 项目作者是 Cathryn Lavery，它被做成一个 agent skill，采用 MIT 协议。
50%待验证diagram-design 能绘制 44 种图表类型，输出单个内联 SVG 的 HTML 文件，支持重绘 Mermaid、draw.io 和 Excalidraw 源文件，并带有从用户网站提取配色和字体的引导步骤。
50%待验证diagram-design 的 SKILL.md 大小为 30.5 KB，CI 将其限制在 40000 字节以内，因为每次调用都会完整加载到上下文窗口。
50%待验证diagram-design 的 references/ 目录包含 62 个 Markdown 文件，合计约 710 KB；assets/ 包含 204 个示例图和模板；scripts/ 有五个仅用标准库的 Python 文件。
50%待验证diagram-design 的风格规则包括：超过九个节点就拆分；强调色只用在一两个元素上；禁止阴影；所有连接线都是直角折线，不用斜线；结构几何对齐 4px 网格；不要照搬 Mermaid 的自动布局。
50%待验证用一个短 Node 脚本扫描 diagram-design 的全部 204 个示例后发现：唯一的外部主机是 fonts.googleapis.com；十个文件含 script，全是动画变体；文件大小中位数 12.6 KB，最大的是一个 208 KB 的动画爆炸键盘图。
50%待验证diagram-design 内置的 export_svg.py 能把 208 KB 的示例转成 8703 字节的独立 SVG，id 加了前缀，便于与其他图表共处一页。
50%待验证diagram-design 的导入脚本只解析文本，从不渲染或抓取；导入器只读流程图、序列图、状态图和 ER 图，拒绝甘特图、时间线、旅程图、桑基图和象限图。
50%待验证diagram-design 的对抗性样例将 'IGNORE ALL PREVIOUS INSTRUCTIONS' 藏在节点标签里，提取器将其保留为转义文本，并丢弃了四条样式指令和点击处理器。
50%待验证测试者故意破坏流程图的三条头部规则（七个节点全上强调色、六个加投影、一条斜向箭头）后，diagram-design 自带的 self_check.py 直接放行；几何验证器抓到了斜线，但它位于 npx skills add 安装的 skill 文件夹之外；调色板 lint 没说话；没有任何脚本检查阴影。
50%待验证diagram-design 的 self_check.py 是一个安全与无障碍门禁，不是品味门禁；测试者加一张远程图片并删掉 <title> 后，它报出五个问题。
50%待验证diagram-design 打包了 27 种视觉类型
50%待验证diagram-design 每种视觉类型都提供浅色、深色和全编辑三套静态样例
50%待验证diagram-design 的静态样例无需构建步骤、不依赖 JavaScript、无外部图片依赖
50%待验证diagram-design 引入了 7 类行为模式，将抽象行为概念先归类再映射到最接近的现成视觉类型
50%待验证diagram-design 支持直接复用 draw.io（.io）或 Mermaid 制作的原始文件，用同一套设计系统按指定目标尺寸和细节档位重新绘制
50%待验证diagram-design 提供托管安装和本地路径安装两种路径，二者在更新机制上存在差异
50%待验证托管安装 diagram-design 在更新时会覆盖掉 styleguide.md，抹掉用户的自定义样式配置
50%待验证若需自定义风格并保住配置不被更新冲掉，应克隆仓库走本地路径安装
50%