尧图网站建设 
图表设计工具实战指南5 分钟装好 Diagram Design一句话出 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-designDiagram Design 是给 Claude Code、Codex 这类 AI Agent 用的技能包你用一句自然语言描述需求它直接生成编辑器质感的自包含 HTML SVG 图表39 种图型不依赖任何渲染库配色还能自动对齐你的品牌。输出的是那种设计师不会翻白眼的图而不是千篇一律的圆角框加荧光色。适合正在用 AI 编码助手、受够了AI 味图表的开发者。 安装与验证两种装法选一个10 秒确认就绪装法分两类先挑适合你的方式适用场景注意事项git clone 软链接想直接改 style-guide 定制样式改动会保留不会被更新覆盖Claude Code 插件市场只想最快上手体验更新可能重置 style-guide定制样式建议存成 profile# 克隆仓库并软链接进 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-designClaude Code 插件用户直接在会话里跑/plugin marketplace add加/plugin install两条命令即可Codex 用户走codex plugin对应命令效果一样。安装后如何验证打开内置图库能正常翻图就说明装好了open ~/code/diagram-design/skills/diagram-design/assets/index.html # macOSLinux 换成 xdg-open预期结果浏览器弹出一个画廊页全部 39 种图表按 浅色 / 深色 / 完整编辑版 三个 tab 排列双击任意 example 文件都能离线打开无需任何构建步骤。✏️ 核心工作流一句话到一张图第一步描述需求。直接在会话里说人话就行图型它自己挑Make me an architecture diagram of my app: frontend, backend, database, Redis cache.架构图示例组件 连接关系强调色只落在最关键的 1-2 个节点上第二步触发生成。动笔前它会先报方案选了什么图型、什么尺寸、超预算的部分打算砍掉什么你可以拦下来改方向不拦就直接出图最终是一个.html文件双击即开。换句话就能拿到完全不同的图型I need a quadrant showing Q2 projects by impact vs effort. Give me a sequence diagram of the OAuth handshake.流程图示例分支决策逻辑连接线全部走圆角直角走线第三步查看与导出。用浏览器打开 HTML 就能截图使用需要放进 PPT 或 Figma 时一句话出 PNG / SVGExport this diagram as SVG and PNG.时序图示例导出时只保留 SVG 本体编辑卡片和页头会被剥离 品牌风格融入60 秒同步你的网站配色默认皮肤白烟纸面 原子橙强调色直接截图都不难看但要让它长在你的品牌上把官网 URL 丢给它就行onboard diagram-design to https://yoursite.com它会自动抓首页、提取主色板和字体栈、映射成语义角色然后给你看一个 diff 提案你说apply才落盘。之后每张图都继承这套皮肤还会附一份保真回执采样了哪些页面、每个色值落在哪个角色、字体是精确匹配还是走了 fallback。不想走自动流程手动改这一份文件就够了所有 39 种图型都从它读色style-guide.md。核心语义角色角色名含义典型值默认浅色paper页面背景#f5f5f5ink主文本和主线条#2d3142muted次要文本、默认箭头#4f5d75accent强调色每张图最多 1-2 处#eb6c36link外部调用 / HTTP 箭头#2e5aa8层次结构图示例换肤后整套图型自动继承新色板无需逐类型调整 设计规范速查4px 网格与复杂度上限指标取值网格所有坐标、尺寸、间距必须是 4 的倍数字号8 / 12 / 16 / 20 / 24 / 28节点宽高80 / 96 / 112 / 128 / 160 / 240节点间距20 / 24 / 32 / 40 / 48内边距8 / 12 / 16节点数上限9超了拆成总览 细节两张图箭头数上限12accent 元素上限2树深度上限4目标密度4/10 进阶技巧从精修到重绘加编辑风标注给图补一句旁白比多加一个节点有效。斜体衬线 虚线引导线规范见 primitive-annotation.md。换手绘质感想要博客文章那种随手画的感觉套一个 SVG 扰动滤镜就行只晃线条不晃文字。适合随笔技术文档别用primitive-sketchy.md。换输出变体每种图型都自带三种皮肤按投放场景挑template.html 简约浅色默认、template-dark.html 深色、template-full.html 带摘要卡的完整编辑版。重绘现成的 draw.io / Mermaid已有旧图不用推倒重来直接指给技能重画。格式、尺寸、细节度、受众四个旋钮都能调12 个节点的 draw.io 文件可以压成 7 个节点的精简版/diagram-design:import-mermaid README.md --diagramall导入重绘示例源文件的六种粉彩填充被收敛成一个强调色手拖坐标落回 4px 网格 常见问题对比度校验没过怎么办onboarding 写色值前会自动做 WCAG AA 检查ink对paper需 ≥ 4.5:1。不过不会硬写它会给出一个调整后的值并解释原因你确认后再落盘也可以自己在 style-guide.md 里手动改对应角色。网站用了自定义字体没法复用呢自定义托管或付费字体会被标成 fallback策略是只换色不换字保留默认的 Instrument Serif / Geist 字体方案绝不静默替换成系统字体也不假装精确匹配。首次使用时弹出一段询问这是首次生图的守门提示工具原文输出This is your first diagram in this project. The style guide is still at the default...它在问你要不要先定制皮肤。选 URL onboarding、手动贴 tokens、或先用默认都行风格一旦定制过后续就不会再问。导出 PNG 时提示缺少 PlaywrightPNG 导出依赖 Playwright Chromium一次性装好即可SVG 导出不需要pip install playwright playwright install chromium装完再让它导出一次就好。打开 assets/index.html 把 39 种图型按三个 tab 翻一遍然后挑一个你手头的项目让它画出第一张图。去吧光看图库出不了图。【免费下载链接】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），仅供参考 图表设计工具实战指南：5 分钟装好 Diagram Design，一句话出 39 种图
图表设计工具实战指南5 分钟装好 Diagram Design一句话出 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-designDiagram Design 是给 Claude Code、Codex 这类 AI Agent 用的技能包你用一句自然语言描述需求它直接生成编辑器质感的自包含 HTML SVG 图表39 种图型不依赖任何渲染库配色还能自动对齐你的品牌。输出的是那种设计师不会翻白眼的图而不是千篇一律的圆角框加荧光色。适合正在用 AI 编码助手、受够了AI 味图表的开发者。 安装与验证两种装法选一个10 秒确认就绪装法分两类先挑适合你的方式适用场景注意事项git clone 软链接想直接改 style-guide 定制样式改动会保留不会被更新覆盖Claude Code 插件市场只想最快上手体验更新可能重置 style-guide定制样式建议存成 profile# 克隆仓库并软链接进 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-designClaude Code 插件用户直接在会话里跑/plugin marketplace add加/plugin install两条命令即可Codex 用户走codex plugin对应命令效果一样。安装后如何验证打开内置图库能正常翻图就说明装好了open ~/code/diagram-design/skills/diagram-design/assets/index.html # macOSLinux 换成 xdg-open预期结果浏览器弹出一个画廊页全部 39 种图表按 浅色 / 深色 / 完整编辑版 三个 tab 排列双击任意 example 文件都能离线打开无需任何构建步骤。✏️ 核心工作流一句话到一张图第一步描述需求。直接在会话里说人话就行图型它自己挑Make me an architecture diagram of my app: frontend, backend, database, Redis cache.架构图示例组件 连接关系强调色只落在最关键的 1-2 个节点上第二步触发生成。动笔前它会先报方案选了什么图型、什么尺寸、超预算的部分打算砍掉什么你可以拦下来改方向不拦就直接出图最终是一个.html文件双击即开。换句话就能拿到完全不同的图型I need a quadrant showing Q2 projects by impact vs effort. Give me a sequence diagram of the OAuth handshake.流程图示例分支决策逻辑连接线全部走圆角直角走线第三步查看与导出。用浏览器打开 HTML 就能截图使用需要放进 PPT 或 Figma 时一句话出 PNG / SVGExport this diagram as SVG and PNG.时序图示例导出时只保留 SVG 本体编辑卡片和页头会被剥离 品牌风格融入60 秒同步你的网站配色默认皮肤白烟纸面 原子橙强调色直接截图都不难看但要让它长在你的品牌上把官网 URL 丢给它就行onboard diagram-design to https://yoursite.com它会自动抓首页、提取主色板和字体栈、映射成语义角色然后给你看一个 diff 提案你说apply才落盘。之后每张图都继承这套皮肤还会附一份保真回执采样了哪些页面、每个色值落在哪个角色、字体是精确匹配还是走了 fallback。不想走自动流程手动改这一份文件就够了所有 39 种图型都从它读色style-guide.md。核心语义角色角色名含义典型值默认浅色paper页面背景#f5f5f5ink主文本和主线条#2d3142muted次要文本、默认箭头#4f5d75accent强调色每张图最多 1-2 处#eb6c36link外部调用 / HTTP 箭头#2e5aa8层次结构图示例换肤后整套图型自动继承新色板无需逐类型调整 设计规范速查4px 网格与复杂度上限指标取值网格所有坐标、尺寸、间距必须是 4 的倍数字号8 / 12 / 16 / 20 / 24 / 28节点宽高80 / 96 / 112 / 128 / 160 / 240节点间距20 / 24 / 32 / 40 / 48内边距8 / 12 / 16节点数上限9超了拆成总览 细节两张图箭头数上限12accent 元素上限2树深度上限4目标密度4/10 进阶技巧从精修到重绘加编辑风标注给图补一句旁白比多加一个节点有效。斜体衬线 虚线引导线规范见 primitive-annotation.md。换手绘质感想要博客文章那种随手画的感觉套一个 SVG 扰动滤镜就行只晃线条不晃文字。适合随笔技术文档别用primitive-sketchy.md。换输出变体每种图型都自带三种皮肤按投放场景挑template.html 简约浅色默认、template-dark.html 深色、template-full.html 带摘要卡的完整编辑版。重绘现成的 draw.io / Mermaid已有旧图不用推倒重来直接指给技能重画。格式、尺寸、细节度、受众四个旋钮都能调12 个节点的 draw.io 文件可以压成 7 个节点的精简版/diagram-design:import-mermaid README.md --diagramall导入重绘示例源文件的六种粉彩填充被收敛成一个强调色手拖坐标落回 4px 网格 常见问题对比度校验没过怎么办onboarding 写色值前会自动做 WCAG AA 检查ink对paper需 ≥ 4.5:1。不过不会硬写它会给出一个调整后的值并解释原因你确认后再落盘也可以自己在 style-guide.md 里手动改对应角色。网站用了自定义字体没法复用呢自定义托管或付费字体会被标成 fallback策略是只换色不换字保留默认的 Instrument Serif / Geist 字体方案绝不静默替换成系统字体也不假装精确匹配。首次使用时弹出一段询问这是首次生图的守门提示工具原文输出This is your first diagram in this project. The style guide is still at the default...它在问你要不要先定制皮肤。选 URL onboarding、手动贴 tokens、或先用默认都行风格一旦定制过后续就不会再问。导出 PNG 时提示缺少 PlaywrightPNG 导出依赖 Playwright Chromium一次性装好即可SVG 导出不需要pip install playwright playwright install chromium装完再让它导出一次就好。打开 assets/index.html 把 39 种图型按三个 tab 翻一遍然后挑一个你手头的项目让它画出第一张图。去吧光看图库出不了图。【免费下载链接】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），仅供参考