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 自动布局的旧图换格式也照样丑。有了它之后同样的内容被重绘成编辑级作品并附一份保真清单告诉你哪些节点被合并、折叠或删除了。没有它之前每张图都要手工挑颜色去贴官网。有了它之后丢给它一个网站 URL60 秒自动提取主色板和字体栈连 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 / PNGSVG 进 Figma 继续编辑PNG 默认 2 倍分辨率、透明背景塞进幻灯片和社交媒体图表类型39 种举核心几类对你有什么用架构、流程图、时序、泳道技术写作最常用的四件套一次装齐ER / 数据库 schema / 部署画出真实表结构、约束和部署拓扑不是示意图糊弄甘特、看板、用户旅程项目管理和体验叙事也能出图Loop 飞轮2.0 新增把「捕获→研究→决策→行动」这类自强化循环画清楚2.5.10 又补了 Sankey、Wardley 图等 10 种导入与定制对你有什么用draw.io / Mermaid 重绘格式、尺寸、细节、受众四个旋钮对齐投放场景附保真清单品牌 onboarding给个 URL 就提取色板和字体SVG 自带roleimg和可读描述无障碍是默认项走一遍真实流程从 .drawio 文件到幻灯可用假设你有一个同事手绘的platform.drawio12 个节点、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-designdiagram-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），仅供参考