Diagram Design:三分钟快速上手编辑级AI图表生成
Diagram Design:三分钟快速上手编辑级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 画一张系统架构图,它回给你一张紫蓝渐变的深色底、所有节点同款圆角矩形、阴影满天飞的示意图——放进汇报里丢人,删掉又可惜。开源项目 Diagram Design 就是来治这个问题的,它让 AI 一句话产出编辑级图表。Diagram Design 是什么Diagram Design 是给 Claude Code、Codex、Pi 这类 AI 编程助手用的 Agent Skill。你用自然语言描述需求,它产出一个自包含 HTML 文件:SVG 和 CSS 全部内联,双击就能在浏览器打开,没有构建步骤、不依赖 JavaScript、不依赖任何外部图片。三种静态变体各管一个场景:极简浅色配博客和文档插图,极简深色进深色主题页面,完整编辑版带标题、摘要卡片和页脚,是杂志级排版。一句话:它像杂志印刷厂直接给你成品,而不是递给你一台打印机让你自己印。3 分钟跑通第一张图在 Claude Code 里执行这两行完成安装:/plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-designdiagram-design然后直接在对话框里说人话,比如:画一张我应用的架构图:前端、后端、数据库、Redis 缓存。 画一个带 token 刷新的 401 重试时序图。有个交互细节值得留意:它不会急着出图,而是先告诉你选了哪类图表、画布多大、准备裁掉哪些内容,你确认之后才生成文件。完整规则都写在 SKILL.md 里。为什么画得不像 AI:四条硬规则它不让 AI 自由发挥,而是把审美规则全部固化在 style-guide.md 一个文件中。最有辨识度的四条是:只保留一个强调色(珊瑚橙),最多落在 1–2 个焦点节点上。这条解决处处强调等于没有强调的问题,读者的视线有地方落。无阴影,只有 1px 细边框,圆角不超过 8px。这条干掉的是悬浮在页面上的科技风塑料感。4 像素网格:所有坐标、宽度、间距必须能被 4 整除。这条解决错位和间距不均,也是不像 AI最容易被忽略的细节。密度上限 4/10,超过 9 个节点就拆成两张图。这条解决一眼信息量过载。规则背后的设计哲学只有一句:最高级的操作通常是删除。进阶玩法:旧图重绘到品牌色继承手里已经有一堆旧图表?可以一键升级。它支持读取 .drawio(含 .xml/.png/.svg 变体)、.mmd、.mermaid,以及 Markdown 里的 mermaid 代码块,全程纯文本解析,不渲染、不联网。说白了,这是重绘不是转格式:源文件的坐标和配色全部丢掉,内容用这套设计规则重新画,流程见 import-drawio.md 和 import-mermaid.md。出图前有四个旋钮:格式(html/svg/png)、尺寸(文档、幻灯片 16:9 等 9 种预设)、细节(faithful/balanced/simplified)、受众(engineer/mixed/executive);结束后还会附一份保真清单,写清楚哪些节点被合并、折叠或删除,AI 做过什么都查得到。品牌色继承更省事:把网站地址告诉它,它自己抓取主色板和字体栈,把网页背景映射成图表底色、按钮色映射成强调色,对比度过不了 WCAG AA 时会解释原因并给调整建议,见 onboarding.md。画完还能导出:SVG 丢进 Figma 或 Illustrator 继续编辑,透明背景 PNG 默认 2 倍分辨率,直接塞进幻灯片,一条斜杠命令或一句自然语言都行,见 export.md。什么时候别用它表格能说清就用表格,列表能说清就用列表,一句话讲明白就写那句话——只有当读者从图里学到的比一段文字更多时才值得画。去仓库的在线画廊翻一遍全部样图,对眼就装一个试试 【免费下载链接】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），仅供参考