尧图网站建设 
Diagram Design 快速上手:用 Claude Code 一句话画出 39 种 SVG 架构图【免费下载链接】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-designDiagram Design 是免费开源的 Claude Code 画图技能,支持 39 种图表类型。你用一句自然语言描述需求,它就产出自包含的 HTMLSVG 图表,没有 Mermaid、不需要构建、不依赖 Figma。它适合需要在文档、博客或演示里放架构图、流程图、时序图,又希望图表风格和自家网站保持一致的开发者与写作者。注册成 Claude Code 技能只需两条命令克隆仓库,再把技能目录软链到 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,技能以diagram-design名称注册完毕。如果你只想快速体验、不想落盘,也可以在 Claude Code 里依次执行/plugin marketplace add cathrynlavery/diagram-design和/plugin install diagram-designdiagram-design,注意插件方式下样式自定义可能无法持久保存。装好之后,在任何项目里丢一句话:「帮我画一张架构图:前端、后端、数据库、Redis 缓存」。产出的是一份独立 HTML,浏览器直接打开就能看,无 JS 依赖、无外部图片。想自己动手改也行,复制assets/template.html(浅色)、assets/template-dark.html(深色)或assets/template-full.html(完整编辑模式)任意一份开始编辑,图库在assets/index.html里可以翻全部 39 种。让图表自动继承你的品牌 最快的方式是让工具去读你的网站:直接说「onboard diagram-design to https://你的域名.com」。它会抓取首页,提取主色和字体栈,再映射到 paper、ink、muted、accent 这些语义角色,经你确认后写入样式指南,大约一分钟,此后所有图表都继承同一套皮肤。另一条路是手写 tokens:如果你手头已有设计变量,直接口述给它;或者打开 style-guide.md 手动改。五个核心角色:paper 是页面背景,ink 是主文本和线条,muted 是次要文本,accent 留给强调,link 用于链接和外部箭头。三个真实任务:架构图、时序图、四象限架构图:「Draw 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」。项目按两轴落位,先做哪个、砍哪个,扫一眼就清楚。它为什么看起来专业:一组硬性预算专业感不是玄学,是一套写进技能的约束:规则取值4px 网格字号 8–40、节点宽高 80–320、间距 20–48、内边距 8–16,全部取 4 的倍数节点数≤9,超了就拆成两张图连线数≤12,关系从布局能看出的线直接删掉强调色≤2 处,只留给读者该先看的东西层级深度≤4 层(树、组织图等)目标密度4/10,不需要配说明书就能读懂踩坑速查:三个高频问题对比度校验失败了?工具按 WCAG AA(≥4.5:1)检查文本与背景,不过会给出调整值并说明原因,照建议改即可。站点用了自定义字体怎么办?没关系,它会回退到默认字体方案:Instrument Serif 做标题,Geist Sans 做节点名,Geist Mono 做技术标签。第一次画图时被问了一句话?样式指南还是默认值,它会让你三选一:跑 onboard、手动贴 tokens,或先用默认样式。选完就不会再问。现在就去画第一张 ⚡下次需要图表时,别打开 Figma,把这句话丢给 Claude Code:「onboard diagram-design to 我的网站,然后画一张架构图」。4px 网格和复杂度预算会替你守住下限,你只管描述业务。【免费下载链接】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），仅供参考 Diagram Design 快速上手:用 Claude Code 一句话画出 39 种 SVG 架构图
Diagram Design 快速上手:用 Claude Code 一句话画出 39 种 SVG 架构图【免费下载链接】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-designDiagram Design 是免费开源的 Claude Code 画图技能,支持 39 种图表类型。你用一句自然语言描述需求,它就产出自包含的 HTMLSVG 图表,没有 Mermaid、不需要构建、不依赖 Figma。它适合需要在文档、博客或演示里放架构图、流程图、时序图,又希望图表风格和自家网站保持一致的开发者与写作者。注册成 Claude Code 技能只需两条命令克隆仓库,再把技能目录软链到 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,技能以diagram-design名称注册完毕。如果你只想快速体验、不想落盘,也可以在 Claude Code 里依次执行/plugin marketplace add cathrynlavery/diagram-design和/plugin install diagram-designdiagram-design,注意插件方式下样式自定义可能无法持久保存。装好之后,在任何项目里丢一句话:「帮我画一张架构图:前端、后端、数据库、Redis 缓存」。产出的是一份独立 HTML,浏览器直接打开就能看,无 JS 依赖、无外部图片。想自己动手改也行,复制assets/template.html(浅色)、assets/template-dark.html(深色)或assets/template-full.html(完整编辑模式)任意一份开始编辑,图库在assets/index.html里可以翻全部 39 种。让图表自动继承你的品牌 最快的方式是让工具去读你的网站:直接说「onboard diagram-design to https://你的域名.com」。它会抓取首页,提取主色和字体栈,再映射到 paper、ink、muted、accent 这些语义角色,经你确认后写入样式指南,大约一分钟,此后所有图表都继承同一套皮肤。另一条路是手写 tokens:如果你手头已有设计变量,直接口述给它;或者打开 style-guide.md 手动改。五个核心角色:paper 是页面背景,ink 是主文本和线条,muted 是次要文本,accent 留给强调,link 用于链接和外部箭头。三个真实任务:架构图、时序图、四象限架构图:「Draw 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」。项目按两轴落位,先做哪个、砍哪个,扫一眼就清楚。它为什么看起来专业:一组硬性预算专业感不是玄学,是一套写进技能的约束:规则取值4px 网格字号 8–40、节点宽高 80–320、间距 20–48、内边距 8–16,全部取 4 的倍数节点数≤9,超了就拆成两张图连线数≤12,关系从布局能看出的线直接删掉强调色≤2 处,只留给读者该先看的东西层级深度≤4 层(树、组织图等)目标密度4/10,不需要配说明书就能读懂踩坑速查:三个高频问题对比度校验失败了?工具按 WCAG AA(≥4.5:1)检查文本与背景,不过会给出调整值并说明原因,照建议改即可。站点用了自定义字体怎么办?没关系,它会回退到默认字体方案:Instrument Serif 做标题,Geist Sans 做节点名,Geist Mono 做技术标签。第一次画图时被问了一句话?样式指南还是默认值,它会让你三选一:跑 onboard、手动贴 tokens,或先用默认样式。选完就不会再问。现在就去画第一张 ⚡下次需要图表时,别打开 Figma,把这句话丢给 Claude Code:「onboard diagram-design to 我的网站,然后画一张架构图」。4px 网格和复杂度预算会替你守住下限,你只管描述业务。【免费下载链接】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），仅供参考