尧图网页设计 
28种图表一键生成60秒自动匹配品牌色让AI画图摆脱机翻味的图表设计工具【免费下载链接】diagram-design27 editorial diagram types for Claude Code. Self-contained HTML SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design让 AI 画一张架构图你大概率会得到千篇一律的圆角框、彩色渐变和好像很专业的阴影——放进文档里连你自己都想改。Diagram Design 正是为这个问题而生的开源图表设计工具给 Claude Code 加上一项技能用 28 种编辑级图表类型输出自包含的 HTMLSVG 图表默认无阴影、无脚本还能读取你的网站自动套用品牌风格。这篇文章不走安装→配置→上手的老路而是顺着一条真实工作流走完五步先看成品、再换皮肤、再避开 AI 味、再把旧图重绘、最后验证成果。一句话生成架构图先确认成品再谈细节第一个任务很简单让 Claude Code 画出你的第一张图。在会话里直接用自然语言描述比如Make me an architecture diagram of my app: frontend, backend, database, Redis cache. Give me a sequence diagram of the OAuth handshake. I need a quadrant showing Q2 projects by impact vs effort.Agent 会自己选类型、搭建 HTML 并保存为单个.html文件。双击就能在浏览器打开没有构建步骤、没有运行时依赖。为什么要这么做先确认它懂我要什么再决定要不要调细节——避免在样式上折腾半小时结果方向根本不对。28 种类型覆盖了架构、流程图、时序图、状态机、ER、泳道、四象限、雷达、甘特、树图等常见场景每个类型都有一份独立的规范文件存放在skills/diagram-design/references/下的type-*.md里画哪种就加载哪种不相关的规范不会占用上下文。关于密度有一条硬规则单图最多 9 个节点、12 条连线、强调色最多 2 处超出就拆成总览细节两张图。这条限制不是束缚你而是给图表留出呼吸空间——超过 9 个节点基本就意味着它其实是两张图。60秒让图表自动匹配你的品牌色一次设置全库生效第二件事把网站的配色变成图表的默认皮肤。在 Claude Code 里执行onboard diagram-design to https://你的网站域名.com技能会抓取首页 → 提取主色调和字体栈 → 映射成五个语义角色paper 背景、ink 正文、muted 次要、accent 强调、link 链接→ 给出修改提案 → 写入skills/diagram-design/references/style-guide.md。为什么要这么做颜色只维护一份而不是散落在每个 HTML 文件里之后所有新图自动继承这套皮肤不用逐个改。写入前会自动做 WCAG AA 对比度检查正文与背景的对比度 ≥ 4.5:1不达标会给出调色建议并解释原因——如果你的网站恰好是红底白字这类极端配色它会先拦下来。不想让技能读网站也可以直接手改style-guide.md里的色值。这个文件是全部 28 种图表的唯一样式来源改一处所有图同步生效。识别AI味图表的4个特征从源头避开重画第三个任务有点意思学会给 AI 生成的图挑刺然后让技能按规矩画。一张图为什么一眼就能看出是 AI 画的最常见的四个破绽阴影加发光这里全部禁止改用 1px 细线边框最大圆角 10px字体乱用节点名用 Geist sans端口、URL 这类技术内容才用 Geist Mono标题用 Instrument Serif绝不是一种等宽字体走天下强调色滥用橙红色的 accent 只留给 1-2 个焦点元素重要就标红恰恰会抹掉焦点坐标随心所有字号、间距、坐标都必须是 4 的倍数任何以 1、2、3、5、6、7、9 结尾的坐标都会被要求修正。为什么要这么做这些判断标准被写进了技能自身的预输出检查清单Agent 按规范画而不是碰运气你省下的是反复再改改的来回。这套审美底线沉淀在SKILL.md里每次画完自动过一遍还有脚本兜底python3 scripts/verify-geometry.py会检查标签是否被后绘制的节点裁切。把draw.io/Mermaid旧图重绘成新风格内容不丢画面统一如果团队里已经积压了一堆 draw.io 或 Mermaid 图不需要重画一遍。直接用斜杠命令喂给技能/diagram-design:import-drawio platform.drawio /diagram-design:import-mermaid architecture.mmd --sizeslide-16x9 --detailsimplified关键要分清转换是照搬重绘是内容保留、画面重做。源文件的坐标、配色、字体全部丢弃组件、关系、分组、方向完整保留再套上你的品牌皮肤。四个旋钮决定成品去向formathtml/svg/png、size文档、幻灯片、社交图九种预设、detailfaithful 上限 24 节点、balanced 上限 12、simplified 上限 7、audience工程师/混合/高管只改措辞不改数量。每次导入结束技能还会附一份 fidelity ledger逐条告诉你哪些节点被合并、折叠或丢弃——你知道源图里有什么它不会瞒着你删东西。完整流程见skills/diagram-design/references/import-drawio.md与import-mermaid.md。为什么要这么做旧图的数据不浪费但最终画面和你新建的图库保持同一套设计语言。装好后当场验证3件事确认技能真的在工作最后是安装与验收。用下面的命令把技能挂到 Claude Code 上git clone https://gitcode.com/GitHub_Trending/di/diagram-design ~/code/diagram-design ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design重启 Claude Code 后做三个立刻见效的检查看全图库用浏览器打开skills/diagram-design/assets/index.html28 种类型带浅色、深色、完整编辑三个变体标签一次看全复制模板cp skills/diagram-design/assets/template.html my-diagram.html改几行文字就得到一张能直接截图用的图跑自检python3 skills/diagram-design/scripts/self_check.py my-diagram.html输出OK说明无障碍 SVG 结构、单文件安全都通过了。为什么要这么做这三步验证的是技能真的在产出合格图而不是仅仅装好了。如果你打算深度定制样式指南官方建议走克隆后本地路径的方式避免插件更新时覆盖你的改动。你的下一步挑战重做一张你最不满意的旧图翻出你最近贴进文档、自己却不太满意的那张图把它当练手对象如果它是 draw.io 或 Mermaid 来源用 import 命令重绘对照 fidelity ledger 检查哪些信息丢了如果只是丑就把它升级成template-full.html的完整编辑模式加上摘要卡片当 hero 图把这次配置存成命名 profile下一个项目直接引用不用重新调色。想深入原理docs/adr/里记录了这些设计决策的来龙去脉想贡献新的图表类型参考CONTRIBUTING.md里的验证门禁。把一张旧图重做到可以放进博客的程度你就算真正上手了。【免费下载链接】diagram-design27 editorial diagram types for Claude Code. Self-contained HTML SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 28种图表一键生成，60秒自动匹配品牌色：让AI画图摆脱“机翻味“的图表设计工具
28种图表一键生成60秒自动匹配品牌色让AI画图摆脱机翻味的图表设计工具【免费下载链接】diagram-design27 editorial diagram types for Claude Code. Self-contained HTML SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design让 AI 画一张架构图你大概率会得到千篇一律的圆角框、彩色渐变和好像很专业的阴影——放进文档里连你自己都想改。Diagram Design 正是为这个问题而生的开源图表设计工具给 Claude Code 加上一项技能用 28 种编辑级图表类型输出自包含的 HTMLSVG 图表默认无阴影、无脚本还能读取你的网站自动套用品牌风格。这篇文章不走安装→配置→上手的老路而是顺着一条真实工作流走完五步先看成品、再换皮肤、再避开 AI 味、再把旧图重绘、最后验证成果。一句话生成架构图先确认成品再谈细节第一个任务很简单让 Claude Code 画出你的第一张图。在会话里直接用自然语言描述比如Make me an architecture diagram of my app: frontend, backend, database, Redis cache. Give me a sequence diagram of the OAuth handshake. I need a quadrant showing Q2 projects by impact vs effort.Agent 会自己选类型、搭建 HTML 并保存为单个.html文件。双击就能在浏览器打开没有构建步骤、没有运行时依赖。为什么要这么做先确认它懂我要什么再决定要不要调细节——避免在样式上折腾半小时结果方向根本不对。28 种类型覆盖了架构、流程图、时序图、状态机、ER、泳道、四象限、雷达、甘特、树图等常见场景每个类型都有一份独立的规范文件存放在skills/diagram-design/references/下的type-*.md里画哪种就加载哪种不相关的规范不会占用上下文。关于密度有一条硬规则单图最多 9 个节点、12 条连线、强调色最多 2 处超出就拆成总览细节两张图。这条限制不是束缚你而是给图表留出呼吸空间——超过 9 个节点基本就意味着它其实是两张图。60秒让图表自动匹配你的品牌色一次设置全库生效第二件事把网站的配色变成图表的默认皮肤。在 Claude Code 里执行onboard diagram-design to https://你的网站域名.com技能会抓取首页 → 提取主色调和字体栈 → 映射成五个语义角色paper 背景、ink 正文、muted 次要、accent 强调、link 链接→ 给出修改提案 → 写入skills/diagram-design/references/style-guide.md。为什么要这么做颜色只维护一份而不是散落在每个 HTML 文件里之后所有新图自动继承这套皮肤不用逐个改。写入前会自动做 WCAG AA 对比度检查正文与背景的对比度 ≥ 4.5:1不达标会给出调色建议并解释原因——如果你的网站恰好是红底白字这类极端配色它会先拦下来。不想让技能读网站也可以直接手改style-guide.md里的色值。这个文件是全部 28 种图表的唯一样式来源改一处所有图同步生效。识别AI味图表的4个特征从源头避开重画第三个任务有点意思学会给 AI 生成的图挑刺然后让技能按规矩画。一张图为什么一眼就能看出是 AI 画的最常见的四个破绽阴影加发光这里全部禁止改用 1px 细线边框最大圆角 10px字体乱用节点名用 Geist sans端口、URL 这类技术内容才用 Geist Mono标题用 Instrument Serif绝不是一种等宽字体走天下强调色滥用橙红色的 accent 只留给 1-2 个焦点元素重要就标红恰恰会抹掉焦点坐标随心所有字号、间距、坐标都必须是 4 的倍数任何以 1、2、3、5、6、7、9 结尾的坐标都会被要求修正。为什么要这么做这些判断标准被写进了技能自身的预输出检查清单Agent 按规范画而不是碰运气你省下的是反复再改改的来回。这套审美底线沉淀在SKILL.md里每次画完自动过一遍还有脚本兜底python3 scripts/verify-geometry.py会检查标签是否被后绘制的节点裁切。把draw.io/Mermaid旧图重绘成新风格内容不丢画面统一如果团队里已经积压了一堆 draw.io 或 Mermaid 图不需要重画一遍。直接用斜杠命令喂给技能/diagram-design:import-drawio platform.drawio /diagram-design:import-mermaid architecture.mmd --sizeslide-16x9 --detailsimplified关键要分清转换是照搬重绘是内容保留、画面重做。源文件的坐标、配色、字体全部丢弃组件、关系、分组、方向完整保留再套上你的品牌皮肤。四个旋钮决定成品去向formathtml/svg/png、size文档、幻灯片、社交图九种预设、detailfaithful 上限 24 节点、balanced 上限 12、simplified 上限 7、audience工程师/混合/高管只改措辞不改数量。每次导入结束技能还会附一份 fidelity ledger逐条告诉你哪些节点被合并、折叠或丢弃——你知道源图里有什么它不会瞒着你删东西。完整流程见skills/diagram-design/references/import-drawio.md与import-mermaid.md。为什么要这么做旧图的数据不浪费但最终画面和你新建的图库保持同一套设计语言。装好后当场验证3件事确认技能真的在工作最后是安装与验收。用下面的命令把技能挂到 Claude Code 上git clone https://gitcode.com/GitHub_Trending/di/diagram-design ~/code/diagram-design ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design重启 Claude Code 后做三个立刻见效的检查看全图库用浏览器打开skills/diagram-design/assets/index.html28 种类型带浅色、深色、完整编辑三个变体标签一次看全复制模板cp skills/diagram-design/assets/template.html my-diagram.html改几行文字就得到一张能直接截图用的图跑自检python3 skills/diagram-design/scripts/self_check.py my-diagram.html输出OK说明无障碍 SVG 结构、单文件安全都通过了。为什么要这么做这三步验证的是技能真的在产出合格图而不是仅仅装好了。如果你打算深度定制样式指南官方建议走克隆后本地路径的方式避免插件更新时覆盖你的改动。你的下一步挑战重做一张你最不满意的旧图翻出你最近贴进文档、自己却不太满意的那张图把它当练手对象如果它是 draw.io 或 Mermaid 来源用 import 命令重绘对照 fidelity ledger 检查哪些信息丢了如果只是丑就把它升级成template-full.html的完整编辑模式加上摘要卡片当 hero 图把这次配置存成命名 profile下一个项目直接引用不用重新调色。想深入原理docs/adr/里记录了这些设计决策的来龙去脉想贡献新的图表类型参考CONTRIBUTING.md里的验证门禁。把一张旧图重做到可以放进博客的程度你就算真正上手了。【免费下载链接】diagram-design27 editorial diagram types for Claude Code. Self-contained HTML SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考