last30days-skill 的 Agent JSON 导出契约：为下游 Agent 与脚本构建版本化机器可读研究数据
2026/9/6 20:55:30
Diagram Design：一句话让 AI 画出编辑级图表，从 prompt 到成图 3 分钟
【免费下载链接】diagram-design38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design
我让 AI 说了一句「画一张架构图：前端、后端、数据库、Redis 缓存」，30 秒后拿到一个自包含 HTML 文件——双击打开、无需构建、不带 JS。这就是 Diagram Design，一个让 AI 编程助手生成编辑级图表的技能包。接下来你会看到它替你省了什么事、底层的规则体系，以及把 draw.io 旧图重绘成幻灯级成图的一次真实流程。
不用 Figma 的图表生成：它到底替你省了什么事
没有它之前：你向 Claude 要一张架构图，回来的是深色背景、青色描边、所有节点同款圆角矩形——一眼假的「AI 味」，要么在 Figma 里修半小时，要么干脆放弃配图。有了它之后：一句话 prompt，产出能直接放进博客的自包含 HTML，配色还能跟你官网保持一致。
没有它之前：手里一堆 draw.io 手拖坐标、Mermaid 自动布局的旧图，换格式也照样丑。有了它之后：同样的内容被重绘成编辑级作品，并附一份保真清单，告诉你哪些节点被合并、折叠或删除了。
没有它之前：每张图都要手工挑颜色去贴官网。有了它之后：丢给它一个网站 URL，60 秒自动提取主色板和字体栈，连 WCAG AA 对比度都帮你检查。
作者 Cathryn Lavery 是设计师转写作者，她每次让 Claude 画图都收到和官网格格不入的圆角盒子，索性把编辑级审美标准固化成规则，写成了这个技能。
它是怎么做到的：把品味写进规则
核心思路不是让 AI 更有创造力，而是让它守规则。技能文档里有一句总纲：最高级的操作通常是删除。落到图纸上是一组硬约束：每个节点必须是一个独立概念，永远一起出现的两个节点合并成一个；关系从布局上能看出来就删掉连线；强调色（默认珊瑚橙）只给 1–2 个读者最该注意的节点，多用就失去了信号；所有坐标和尺寸必须是 4 的倍数；密度上限 4/10，超过 9 个节点就该拆成两张图。
所有颜色和字体集中在 style-guide.md 这一个文件里，类型文档引用的是语义角色（paper、ink、accent）而不是色值。这相当于给 AI 塞了一本风格手册外加一位严格编辑：审美被固化成规则，AI 只需要执行。对你的实际价值是两件事——产出的图不会翻车，以及换品牌皮肤时只改一个文件，39 种类型全部继承。
类型选择也分两层：先看语义模式（队列瓶颈、信任边界等 7 种行为模式），再选布局类型。语义负责含义，布局负责画面，互不污染。
你最终拿到什么：自包含图表与 39 种类型
| 交付物 | 对你有什么用 |
|---|---|
| 自包含 HTML（内联 SVG + CSS） | 双击即开，无构建、无 JS、无外部图片；浅色极简 / 深色极简 / 完整编辑版（带标题与摘要卡）三种静态变体 |
| 导出 SVG / PNG | SVG 进 Figma 继续编辑；PNG 默认 2 倍分辨率、透明背景，塞进幻灯片和社交媒体 |
| 图表类型（39 种，举核心几类） | 对你有什么用 |
|---|---|
| 架构、流程图、时序、泳道 | 技术写作最常用的四件套，一次装齐 |
| ER / 数据库 schema / 部署 | 画出真实表结构、约束和部署拓扑，不是示意图糊弄 |
| 甘特、看板、用户旅程 | 项目管理和体验叙事也能出图 |
| Loop 飞轮（2.0 新增） | 把「捕获→研究→决策→行动」这类自强化循环画清楚；2.5.10 又补了 Sankey、Wardley 图等 10 种 |
| 导入与定制 | 对你有什么用 |
|---|---|
| draw.io / Mermaid 重绘 | 格式、尺寸、细节、受众四个旋钮对齐投放场景，附保真清单 |
| 品牌 onboarding | 给个 URL 就提取色板和字体；SVG 自带role="img"和可读描述，无障碍是默认项 |
走一遍真实流程：从 .drawio 文件到幻灯可用
假设你有一个同事手绘的platform.drawio：12 个节点、6 种粉彩色块，还有两张没连线的便利贴。你不用敲命令，直接说一句「把这张 drawio 重绘成幻灯片用的图」。
它先把文件当纯文本解析——不渲染、不联网——然后丢弃源文件的全部坐标、色板和字体，用设计系统重建布局：尺寸定为 16:9 幻灯预设，细节级别选 balanced。完成后附一份保真清单：「12 个源节点 → 8 个绘制」；「Token valid? 判定节点折叠为 Gateway → Auth 连线上的边标签」；「1 张便利贴丢弃，源文件中未连接」；「主请求路径 Web → Gateway → Orders → Postgres 完整保留」。你拿到的是一张 16:9 直接能进 deck 的图，外加逐条可核对的改动说明。
完整流程规则见 import-drawio.md。
最短上手路径：两条安装命令加一句 prompt
以 Claude Code 为例：
/plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-design@diagram-design装完的第一句话：「画一张我应用的架构图：前端、后端、数据库、Redis 缓存。」它会先说明选了什么类型、什么尺寸、复杂度预算会裁掉什么，你确认后才动笔。
不想装插件也行，clone 仓库后打开本地画廊，39 种图 × 3 种变体可以逐张翻：
git clone https://gitcode.com/GitHub_Trending/di/diagram-design然后直接打开 skills/diagram-design/assets/index.html。
它不擅长什么
丑话放前面。第一，能表格说清的对比、能用列表表达的要点，别用它——项目文档自己就写着「读者能不能从图里比从段落里学到更多？不能就别画」。第二，PNG 导出依赖 Playwright 和 Chromium，需要一次性安装；只放网页的话 HTML 本身就够。第三，动效是可选项且限定在 reveal、step、loop 几种确定性模式，如果你要的是能筛选、能交互的 BI 仪表盘，那请去找 ECharts，这不是 Diagram Design 的赛道。
少即是多，这句话在它身上是真的。装好后直接说一句「给我画一个四象限图：Q2 项目按影响力和投入分布」，看第一张产出。
【免费下载链接】diagram-design38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考