一句话生成 27 种专业图Diagram Design 让 AI 画图不再“乱连线”被“AI 味”图表支配的日常如果你经常写技术文档、做方案评审大概率经历过这样的循环让 AI 画一张架构图拿回来的是一排长得差不多的圆角框、几根随手一连的线配色刺眼、间距随意——放进方案文档里怎么看都像一张临时草图。要么花 30 分钟在 Figma 里硬调要么干脆放弃配图。Diagram Design 就是冲着这个问题来的。它是装进 Claude Code、Codex、Pi 等 AI 编程助手的一个开源 Skill技能插件不是独立软件。装上之后你只要用一句话描述需求它会自动选型、排版生成一个可直接用浏览器打开的自包含 HTML 文件内含内联 SVG 和 CSS无构建步骤、无外部 JavaScript 依赖。项目口号是Editorial diagrams your designer won’t hate——设计师不会讨厌的编辑级图表。它到底解决什么问题传统路径下AI 生成的图表通常是Mermaid 通用款圆角矩形、满屏阴影、字体随机、与你的品牌风格完全割裂。而 Mermaid 这类图即代码工具适合把图当代码管理进 Git 的场景draw.io 适合需要精细控制的复杂图Excalidraw 适合头脑风暴——但“AI 直接出成品、品牌还一致”这一格此前是空着的。Diagram Design 的做法是不重新造画图工具而是给 AI 补一层“设计品位”把编辑级审美翻译成一堆 AI 能照做的硬规则。27 种图型AI 自己选项目内置 27 种编辑级图表类型结构类架构图、流程图、时序图、状态机、ER 图/数据模型、泳道图、树状图、组织架构图、嵌套图等分析类象限图、雷达图、维恩图、金字塔/漏斗图、Loop 飞轮图时间类时间线、甘特图、过程图数据类柱状图、折线图、散点图、数据流图等你不用记这些名字。只需要说“帮我画一张应用架构图前端、后端、数据库、Redis 缓存”它会先判断这张图该用架构图而不是随便套一个流程图再控制节点数量、文字长度、留白和连线方向把最重要的部分留下来。每种图型都有三种视觉变体极简浅色适合技术博客、极简深色适合深色站点和演示、全编辑模式适合官网和 PPT。“反 AI 味”的硬约束作者把设计品味写成了不可协商的规则删除优先“最高质量的操作通常是删除”每个节点都得有存在的理由两个总是一起出现的节点应该合并能从布局看出关系就删掉连线复杂度预算单张图最大节点数 9 个、最大箭头数 12 个、强调色元素最多 2 个超限就建议拆成“总览 详情”两张图克制美学目标信息密度 4/10全图只有一种强调色普通元素只用灰黑色焦点只留给读者第一眼该看的一两处像素级严谨所有坐标、宽度、间距必须能被 4 整除1px 细线边框、无阴影、最大圆角 10px排版三件套Instrument Serif标题和斜体旁注、Geist Sans节点名、Geist Mono端口、URL、字段类型等标签各司其职60 秒品牌适配把你的网站 URL 丢给它它会抓取首页、提取主色板和字体栈、映射到 paper背景、ink正文、muted次要文字、accent强调、link链接五个语义角色写入统一的 style-guide.md改一处全局生效。之后每张新图自动继承你的品牌色——网站背景色变成图的纸色CTA 按钮色变成焦点强调色。另外有两点做得不错写入前会自动做 WCAG AA 对比度校验如果配色在图表 9-12px 小字号下看不清会主动给出调整建议还支持多客户 profile做外包、服务多客户的团队可以给每个客户保存独立样式不同项目里颜色和字体不会互相覆盖。draw.io 和 Mermaid 旧图一键重绘博客和文档里躺着大量旧图不必重画。Diagram Design 支持直接导入 .drawio 文件或 Mermaid 源码保留组件、关系和分组抛弃旧坐标、旧配色和自动布局统一换成你的设计系统。重绘时有四个控制旋钮旋钮选项说明formathtml / svg / pngSVG 进 FigmaPNG 进 PPTHTML 上网页size9 种预设文档内嵌、16:9 幻灯片、A4 横版等detailfaithful / balanced / simplified按梯度降级先删装饰 → 再删重复 → 再并叶子audienceengineer / mixed / executive改措辞不改结构audience 旋钮尤其实用同一个 Auth Service 节点给工程师看是完整的接口端口细节给高管看直接变成 “Sign-in”。每次导入结束还会生成一份 fidelity ledger保真度台账列出哪些节点被合并、折叠或丢弃——建议每次都看一遍这份记录确认关键关系没有被简化掉。其他值得一说的特性语义模式与可选动效2.3 版引入语义模式表达队列瓶颈、信任边界这类“行为”时先选语义再挑视觉类型动效有 none / reveal / step / loop 四种默认静态无脚本开了动效也遵循无障碍契约prefers-reduced-motion的用户看到的是完整静态帧导出SVG 矢量无损可进 Figma/Illustrator 二次编辑PNG 默认 2 倍清晰度透明背景预设了 doc-inline博客正文、doc-wide16:9 全宽、social-og社交卡片等尺寸彩蛋原语编辑风斜体批注虚线贝塞尔引线、SVG 湍流滤镜一键手绘风、55 个用 currentColor 自动继承品牌色的单色 IT/云图标使用前必须知道的边界README 里专门写了“什么时候不该用它”。结合实际使用体验有几点要注意它不是独立软件。没有 CLI、没有 package.json安装只能通过 Claude Code 插件市场或克隆仓库做符号链接离开这几款 AI 工具就没法运行。免费的是模板每张图的生成消耗的是你的模型 token。首次使用有门控。style-guide 还是默认值时它会停下来问你要不要先做品牌匹配所以“一句话出图”第一次是行不通的。离线环境的坑。图库首页引用了 Google Fonts 外链内网/离线环境打开会字体回退导出 PNG 需要提前装好 Playwright 和 Chromium。它管排版不管事实。AI 不会自动知道你系统的真实结构——输入里写错的模块和关系最后只是被画得更整齐的错误。先确认内容再把排版交给它。信息量有上限。一张图超过 9 个节点就该拆成两张你不能把几十个模块全塞进去还要求它既完整又清楚。该用表格的场景别硬画图。纯列表、前后对比、一个框就能说清的东西直接用表格或写一句话。 一句话生成 27 种专业图：Diagram Design 让 AI 画图不再“乱连线”
一句话生成 27 种专业图Diagram Design 让 AI 画图不再“乱连线”被“AI 味”图表支配的日常如果你经常写技术文档、做方案评审大概率经历过这样的循环让 AI 画一张架构图拿回来的是一排长得差不多的圆角框、几根随手一连的线配色刺眼、间距随意——放进方案文档里怎么看都像一张临时草图。要么花 30 分钟在 Figma 里硬调要么干脆放弃配图。Diagram Design 就是冲着这个问题来的。它是装进 Claude Code、Codex、Pi 等 AI 编程助手的一个开源 Skill技能插件不是独立软件。装上之后你只要用一句话描述需求它会自动选型、排版生成一个可直接用浏览器打开的自包含 HTML 文件内含内联 SVG 和 CSS无构建步骤、无外部 JavaScript 依赖。项目口号是Editorial diagrams your designer won’t hate——设计师不会讨厌的编辑级图表。它到底解决什么问题传统路径下AI 生成的图表通常是Mermaid 通用款圆角矩形、满屏阴影、字体随机、与你的品牌风格完全割裂。而 Mermaid 这类图即代码工具适合把图当代码管理进 Git 的场景draw.io 适合需要精细控制的复杂图Excalidraw 适合头脑风暴——但“AI 直接出成品、品牌还一致”这一格此前是空着的。Diagram Design 的做法是不重新造画图工具而是给 AI 补一层“设计品位”把编辑级审美翻译成一堆 AI 能照做的硬规则。27 种图型AI 自己选项目内置 27 种编辑级图表类型结构类架构图、流程图、时序图、状态机、ER 图/数据模型、泳道图、树状图、组织架构图、嵌套图等分析类象限图、雷达图、维恩图、金字塔/漏斗图、Loop 飞轮图时间类时间线、甘特图、过程图数据类柱状图、折线图、散点图、数据流图等你不用记这些名字。只需要说“帮我画一张应用架构图前端、后端、数据库、Redis 缓存”它会先判断这张图该用架构图而不是随便套一个流程图再控制节点数量、文字长度、留白和连线方向把最重要的部分留下来。每种图型都有三种视觉变体极简浅色适合技术博客、极简深色适合深色站点和演示、全编辑模式适合官网和 PPT。“反 AI 味”的硬约束作者把设计品味写成了不可协商的规则删除优先“最高质量的操作通常是删除”每个节点都得有存在的理由两个总是一起出现的节点应该合并能从布局看出关系就删掉连线复杂度预算单张图最大节点数 9 个、最大箭头数 12 个、强调色元素最多 2 个超限就建议拆成“总览 详情”两张图克制美学目标信息密度 4/10全图只有一种强调色普通元素只用灰黑色焦点只留给读者第一眼该看的一两处像素级严谨所有坐标、宽度、间距必须能被 4 整除1px 细线边框、无阴影、最大圆角 10px排版三件套Instrument Serif标题和斜体旁注、Geist Sans节点名、Geist Mono端口、URL、字段类型等标签各司其职60 秒品牌适配把你的网站 URL 丢给它它会抓取首页、提取主色板和字体栈、映射到 paper背景、ink正文、muted次要文字、accent强调、link链接五个语义角色写入统一的 style-guide.md改一处全局生效。之后每张新图自动继承你的品牌色——网站背景色变成图的纸色CTA 按钮色变成焦点强调色。另外有两点做得不错写入前会自动做 WCAG AA 对比度校验如果配色在图表 9-12px 小字号下看不清会主动给出调整建议还支持多客户 profile做外包、服务多客户的团队可以给每个客户保存独立样式不同项目里颜色和字体不会互相覆盖。draw.io 和 Mermaid 旧图一键重绘博客和文档里躺着大量旧图不必重画。Diagram Design 支持直接导入 .drawio 文件或 Mermaid 源码保留组件、关系和分组抛弃旧坐标、旧配色和自动布局统一换成你的设计系统。重绘时有四个控制旋钮旋钮选项说明formathtml / svg / pngSVG 进 FigmaPNG 进 PPTHTML 上网页size9 种预设文档内嵌、16:9 幻灯片、A4 横版等detailfaithful / balanced / simplified按梯度降级先删装饰 → 再删重复 → 再并叶子audienceengineer / mixed / executive改措辞不改结构audience 旋钮尤其实用同一个 Auth Service 节点给工程师看是完整的接口端口细节给高管看直接变成 “Sign-in”。每次导入结束还会生成一份 fidelity ledger保真度台账列出哪些节点被合并、折叠或丢弃——建议每次都看一遍这份记录确认关键关系没有被简化掉。其他值得一说的特性语义模式与可选动效2.3 版引入语义模式表达队列瓶颈、信任边界这类“行为”时先选语义再挑视觉类型动效有 none / reveal / step / loop 四种默认静态无脚本开了动效也遵循无障碍契约prefers-reduced-motion的用户看到的是完整静态帧导出SVG 矢量无损可进 Figma/Illustrator 二次编辑PNG 默认 2 倍清晰度透明背景预设了 doc-inline博客正文、doc-wide16:9 全宽、social-og社交卡片等尺寸彩蛋原语编辑风斜体批注虚线贝塞尔引线、SVG 湍流滤镜一键手绘风、55 个用 currentColor 自动继承品牌色的单色 IT/云图标使用前必须知道的边界README 里专门写了“什么时候不该用它”。结合实际使用体验有几点要注意它不是独立软件。没有 CLI、没有 package.json安装只能通过 Claude Code 插件市场或克隆仓库做符号链接离开这几款 AI 工具就没法运行。免费的是模板每张图的生成消耗的是你的模型 token。首次使用有门控。style-guide 还是默认值时它会停下来问你要不要先做品牌匹配所以“一句话出图”第一次是行不通的。离线环境的坑。图库首页引用了 Google Fonts 外链内网/离线环境打开会字体回退导出 PNG 需要提前装好 Playwright 和 Chromium。它管排版不管事实。AI 不会自动知道你系统的真实结构——输入里写错的模块和关系最后只是被画得更整齐的错误。先确认内容再把排版交给它。信息量有上限。一张图超过 9 个节点就该拆成两张你不能把几十个模块全塞进去还要求它既完整又清楚。该用表格的场景别硬画图。纯列表、前后对比、一个框就能说清的东西直接用表格或写一句话。