Diagram Design 是什么让 AI 生成 39 种编辑级图表的完整指南【免费下载链接】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 画一张系统架构图它回给你深色背景、青色描边、所有节点同款圆角矩形的示意图——这就是设计圈说的 AI Slop。Diagram Design 解决的就是这个问题它把编辑级审美固化成可执行的规则让 AI 图表生成自带设计品味。下面从定位、能力、底层规则到上手方式完整拆解这个项目。一句话定位Diagram Design 是一个 Agent Skill智能体技能以插件形式提供给 Claude Code、Codex、Pi 等 AI 编程助手。你用自然语言描述需求它交付一个自包含 HTML 文件——内联 SVG 和 CSS双击即可在浏览器打开。没有构建步骤、不依赖 JavaScript、不依赖任何外部图片。每个图表都提供三种静态变体变体适用场景极简浅色版博客配图、文档插图极简深色版深色主题页面、幻灯片完整编辑版带标题、摘要卡片和页脚的杂志级排版核心技能定义在 SKILL.md全部 39 种图表可以在本地画廊 index.html 中切换三种变体逐一预览。能力全景39 种图表类型流程与逻辑流程图、泳道图、多角色流程、状态机架构与系统架构图、分层架构、端到端技术栈、部署图、依赖图、UML 类图数据ER 数据模型、数据流、Medallion 数据分层、数据库 Schema、Sankey 图时间与状态时序图、时间线、甘特图比较与分布柱状图、折线图、散点图、雷达图、四象限图、维恩图层级与组织树状图、组织架构图、金字塔/漏斗、嵌套图、循环飞轮每种类型都有独立规范文档如 type-flowchart.md布局语法写得很细。2.0 版新增的 Loop飞轮图值得一说 它以共享内存为中心把捕获→研究→决策→行动→衡量→学习这类自我强化循环画得既清晰又美观适合讲增长飞轮和持续改进机制。底层逻辑——它为什么不像 AI 画的它不让 AI 自由发挥而是用一套可验证的设计系统约束输出一个强调色最多两个焦点珊瑚橙只用在 1–2 个读者最该注意的节点上用在 5 个节点上信号就失效无阴影细边框1px 细线边框取代阴影圆角半径最大 10px4 像素网格所有坐标、宽度、间距、字号都必须能被 4 整除——这是不像 AI 生成的关键细节复杂度预算单图最多 9 个节点超过就拆成概览 细节两张6 条连线规则必须用直角圆角连线、标签与线之间留 6–10px 间隙、禁止连线重叠逐条可在输出前检查这套审美规则、色彩令牌和字体栈集中在 style-guide.md 一个文件里统一管理。它的设计哲学只有一句话最高级的操作通常是删除。进阶能力品牌定制、格式重绘与导出品牌定制。告诉它你的网站地址它会抓取首页、提取主色板和字体栈再映射到图表的语义角色网页背景变图表底色CTA 按钮色变焦点强调色正文字体变节点标签字体。流程内置 WCAG AA 对比度检查提取的颜色在图表字号下不达标时会自动提出调整建议并解释原因。触发方式就是一句话onboard diagram-design to 你的网站地址。重绘 draw.io / Mermaid。把已有的图表文件指给它它不是转格式而是用这套设计系统重新画成编辑级图表还有四个调节旋钮旋钮选项作用格式 Formathtml / svg / png / htmlpng决定交付物形态尺寸 Size文档、幻灯片 16:9 / 4:3、社媒、打印等 9 种预设决定画布比例和字号梯度细节 Detailfaithful / balanced / simplified决定保留多少源内容受众 Audienceengineer / mixed / executive决定措辞的专业程度重绘结束还会输出一份保真清单fidelity ledger明确列出哪些节点被合并、折叠或删除——你永远知道它动了什么手脚。完整流程见 import-drawio.md 和 import-mermaid.md。导出 SVG / PNG。SVG 适合放进 Figma、Illustrator 继续编辑PNG 默认 2 倍分辨率、透明背景适合幻灯片和社交媒体。用/diagram-design:export命令或一句把这图导出为 PNG即可完整说明见 export.md。快速上手两行命令生成第一张图以 Claude Code 为例/plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-designdiagram-design然后直接提问下面三句都可以照抄画一张我应用的架构图前端、后端、数据库、Redis 缓存。给我一张四象限图Q2 项目按影响力和投入分布。把这份 drawio 文件重绘成幻灯片用的图。AI 会先说明它选定的图表类型、尺寸和计划裁掉的内容你确认后再生成最终交付单个自包含 HTML 文件。想手动改模板也行直接复制 template.html极简版或 template-full.html编辑版开始。使用边界什么时候不该画图项目自己写得很直白这些情况不值得用一串列表 → 表格或要点就够了前后对比 → 一张表格说清只有一个框加标签的图 → 直接写那句话发推或终端用的快速 unicode 图 → 用 wiretext它内置的自检问题值得刻在脑子里读者从中能学到比一段好文字更多的东西吗不能就别画。已知限制PNG 导出需要一次性安装 Playwright Chromium导出的 SVG/PNG 只含图表本体完整编辑版的标题卡片和页脚不随导出交付。收束Diagram Design 把编辑级图表生成压缩成一个技能39 种图表类型、60 秒品牌定制、draw.io 和 Mermaid 重绘、SVG/PNG 导出全部围绕克制这一条审美主线。它最适合写博客、做汇报、需要把 AI 产出的图表直接放进文档和幻灯片的人。从克隆仓库开始用一句话试试你的第一张编辑级图表。【免费下载链接】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），仅供参考 
长河君 · 2026/9/6 21:22:30 · 阅读 1.2k Diagram Design 是什么？让 AI 生成 39 种编辑级图表的完整指南
Diagram Design 是什么让 AI 生成 39 种编辑级图表的完整指南【免费下载链接】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 画一张系统架构图它回给你深色背景、青色描边、所有节点同款圆角矩形的示意图——这就是设计圈说的 AI Slop。Diagram Design 解决的就是这个问题它把编辑级审美固化成可执行的规则让 AI 图表生成自带设计品味。下面从定位、能力、底层规则到上手方式完整拆解这个项目。一句话定位Diagram Design 是一个 Agent Skill智能体技能以插件形式提供给 Claude Code、Codex、Pi 等 AI 编程助手。你用自然语言描述需求它交付一个自包含 HTML 文件——内联 SVG 和 CSS双击即可在浏览器打开。没有构建步骤、不依赖 JavaScript、不依赖任何外部图片。每个图表都提供三种静态变体变体适用场景极简浅色版博客配图、文档插图极简深色版深色主题页面、幻灯片完整编辑版带标题、摘要卡片和页脚的杂志级排版核心技能定义在 SKILL.md全部 39 种图表可以在本地画廊 index.html 中切换三种变体逐一预览。能力全景39 种图表类型流程与逻辑流程图、泳道图、多角色流程、状态机架构与系统架构图、分层架构、端到端技术栈、部署图、依赖图、UML 类图数据ER 数据模型、数据流、Medallion 数据分层、数据库 Schema、Sankey 图时间与状态时序图、时间线、甘特图比较与分布柱状图、折线图、散点图、雷达图、四象限图、维恩图层级与组织树状图、组织架构图、金字塔/漏斗、嵌套图、循环飞轮每种类型都有独立规范文档如 type-flowchart.md布局语法写得很细。2.0 版新增的 Loop飞轮图值得一说 它以共享内存为中心把捕获→研究→决策→行动→衡量→学习这类自我强化循环画得既清晰又美观适合讲增长飞轮和持续改进机制。底层逻辑——它为什么不像 AI 画的它不让 AI 自由发挥而是用一套可验证的设计系统约束输出一个强调色最多两个焦点珊瑚橙只用在 1–2 个读者最该注意的节点上用在 5 个节点上信号就失效无阴影细边框1px 细线边框取代阴影圆角半径最大 10px4 像素网格所有坐标、宽度、间距、字号都必须能被 4 整除——这是不像 AI 生成的关键细节复杂度预算单图最多 9 个节点超过就拆成概览 细节两张6 条连线规则必须用直角圆角连线、标签与线之间留 6–10px 间隙、禁止连线重叠逐条可在输出前检查这套审美规则、色彩令牌和字体栈集中在 style-guide.md 一个文件里统一管理。它的设计哲学只有一句话最高级的操作通常是删除。进阶能力品牌定制、格式重绘与导出品牌定制。告诉它你的网站地址它会抓取首页、提取主色板和字体栈再映射到图表的语义角色网页背景变图表底色CTA 按钮色变焦点强调色正文字体变节点标签字体。流程内置 WCAG AA 对比度检查提取的颜色在图表字号下不达标时会自动提出调整建议并解释原因。触发方式就是一句话onboard diagram-design to 你的网站地址。重绘 draw.io / Mermaid。把已有的图表文件指给它它不是转格式而是用这套设计系统重新画成编辑级图表还有四个调节旋钮旋钮选项作用格式 Formathtml / svg / png / htmlpng决定交付物形态尺寸 Size文档、幻灯片 16:9 / 4:3、社媒、打印等 9 种预设决定画布比例和字号梯度细节 Detailfaithful / balanced / simplified决定保留多少源内容受众 Audienceengineer / mixed / executive决定措辞的专业程度重绘结束还会输出一份保真清单fidelity ledger明确列出哪些节点被合并、折叠或删除——你永远知道它动了什么手脚。完整流程见 import-drawio.md 和 import-mermaid.md。导出 SVG / PNG。SVG 适合放进 Figma、Illustrator 继续编辑PNG 默认 2 倍分辨率、透明背景适合幻灯片和社交媒体。用/diagram-design:export命令或一句把这图导出为 PNG即可完整说明见 export.md。快速上手两行命令生成第一张图以 Claude Code 为例/plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-designdiagram-design然后直接提问下面三句都可以照抄画一张我应用的架构图前端、后端、数据库、Redis 缓存。给我一张四象限图Q2 项目按影响力和投入分布。把这份 drawio 文件重绘成幻灯片用的图。AI 会先说明它选定的图表类型、尺寸和计划裁掉的内容你确认后再生成最终交付单个自包含 HTML 文件。想手动改模板也行直接复制 template.html极简版或 template-full.html编辑版开始。使用边界什么时候不该画图项目自己写得很直白这些情况不值得用一串列表 → 表格或要点就够了前后对比 → 一张表格说清只有一个框加标签的图 → 直接写那句话发推或终端用的快速 unicode 图 → 用 wiretext它内置的自检问题值得刻在脑子里读者从中能学到比一段好文字更多的东西吗不能就别画。已知限制PNG 导出需要一次性安装 Playwright Chromium导出的 SVG/PNG 只含图表本体完整编辑版的标题卡片和页脚不随导出交付。收束Diagram Design 把编辑级图表生成压缩成一个技能39 种图表类型、60 秒品牌定制、draw.io 和 Mermaid 重绘、SVG/PNG 导出全部围绕克制这一条审美主线。它最适合写博客、做汇报、需要把 AI 产出的图表直接放进文档和幻灯片的人。从克隆仓库开始用一句话试试你的第一张编辑级图表。【免费下载链接】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），仅供参考