Diagram Design三套模板深度解析极简浅色、深色与全编辑风格怎么选【免费下载链接】diagram-design29 editorial diagram types for Claude Code. Self-contained HTML SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-designDiagram Design 是一款专为 Claude Code 等 AI 编程助手打造的图表设计技能Skill内置 27 种编辑级图表类型全部输出为自包含 HTML 内联 SVG 文件无需构建、无需 JavaScript、双击即可打开。它最大的特点在于每一类图表都同时提供极简浅色、极简深色、全编辑风格三套模板。面对同样的架构图或流程图到底该选哪一套本文就带你逐套拆解它们的差异并给出最快最稳的选择方法看完你就能直接上手。一、先认识三套模板一个类型三种皮肤在skills/diagram-design/assets/目录下每个图表类型都以三套模板为基础命名非常直观模板文件名一句话定位极简浅色template.html开箱即用截图即发布极简深色template-dark.html暗色站点与幻灯片的标配全编辑风格template-full.html让图表成为长文里的主角三套模板共用同一套设计系统白色烟灰纸面、墨黑文字、原子橙强调色、蓝灰次要色全部通过 CSS 变量集中管理。你可以用浏览器直接打开skills/diagram-design/assets/index.html画廊一键切换三套皮肤预览全部 27 种图表。二、极简浅色模板默认之选适合博客与文档极简浅色模板template.html是项目的默认皮肤也是大多数场景下最稳的选择。它的结构极简一个 eyebrow 眉题、一个 Serif 标题、一张内联 SVG 图表仅此而已。核心参数白烟灰纸面#f5f5f5、墨黑文字#2d3142、原子橙强调色#eb6c36、蓝灰次要色#4f5d75。图表没有投影、没有花哨圆角全部坐标和间距严格遵循 4px 网格看起来干净、专业、不AI 味。最适合的场景博客文章、README、技术文档的插图需要快速截图分享到社交媒体的场景团队内部 wiki 或 Notion 页面三、极简深色模板暗色站点与演示稿的最佳拍档如果你的博客本身就是深色主题或者你正在做一场发布会幻灯片极简深色模板template-dark.html就是为你准备的。它并非简单的反色而是经过精心调校的深色皮肤纸面变成深暖炭黑#2d3142文字变成暖白#f5f5f5强调色提亮为更柔和的橙#f08a59保证在暗背景上依然有足够对比度。最适合的场景深色模式网站、产品落地页幻灯片、发布会演示稿高对比度阅读场景由于所有截图示例默认展示浅色皮肤你在画廊中切换到 dark 标签即可看到同样一张架构图的深色版本效果。四、全编辑风格模板让图表成为文章的主角全编辑风格模板template-full.html是三套模板中含金量最高的它不止是一张图而是一整块编辑排版组件。除了图表本身还包含页头区域眉题 大标题 副标题说明图表容器可选的纸面容器与圆角边框三张摘要信息卡宽度故意错落1.1fr 1fr 0.9fr用来补充关键数据页脚等宽字体的 colophon 说明行最适合的场景长文博客、深度技术解析、以图表为核心的专题页面图表需要承担hero 主视觉的职责。五、怎么选一张表帮你三秒做决定如果你还在犹豫直接对照这张表判断条件选它内容要发博客 / README / 文档极简浅色站点是深色主题 / 要做幻灯片极简深色图表是长文核心需要配卡片和说明全编辑风格只是快速出图截图用极简浅色拿不准时极简浅色默认小提示三套模板随时可以互相切换内容节点、连线、语义完全复用切换只影响皮肤不影响信息。六、一分钟快速上手步骤克隆仓库或直接进入项目目录git clone https://gitcode.com/GitHub_Trending/di/diagram-design复制最接近需求的模板cp skills/diagram-design/assets/template.html my-diagram.html # 极简浅色 cp skills/diagram-design/assets/template-dark.html my-diagram.html # 极简深色 cp skills/diagram-design/assets/template-full.html my-diagram.html # 全编辑风格用浏览器直接打开my-diagram.html替换标题与 SVG 内容即可。更省事的方式直接让 AI 助手生成。在 Claude Code、Codex 或 Pi 中安装 skill 后说一句给我画一张架构图前端、后端、数据库、Redis 缓存Agent 会自动选型、生成 HTML 并保存默认就是极简浅色模板。七、进阶让三套模板都变成你的品牌色三套模板共用一个换肤中枢——skills/diagram-design/references/style-guide.md。所有颜色、字体都以语义角色paper、ink、accent、muted定义而不是散落在各文件里的十六进制值。改这一份文件27 种图表 × 3 套模板全部继承新皮肤。你还可以运行 60 秒品牌接入Onboarding把网站地址告诉 Agent它会自动抓取主色调和字体栈映射到语义角色经过 WCAG AA 对比度校验后写入样式指南从此所有图表自动匹配你的品牌。八、小结Diagram Design 的三套模板本质上是一套设计系统在不同场景下的三种呈现极简浅色求快求稳、极简深色适配暗色环境、全编辑风格承载深度内容。记住三个关键词内容不变、皮肤切换、开箱即用。下次 AI 帮你画图之前先想清楚这张图发在哪然后对着上表选模板你就已经领先大多数人了。【免费下载链接】diagram-design29 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），仅供参考