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 和 Pi 的技能包让 AI 助手按统一的编辑级视觉规范出图产出物是能直接双击打开的自包含 HTML 加 SVG 文件。它面向写技术文档、做博客、备演示又不想碰 Figma 的人。 从一张对不上风格的架构图说起让 AI 随手画张图拿回来的往往是一堆圆角矩形配色和字体跟正文毫无关联。结局通常是二选一花半小时在设计软件里修或者干脆放弃。Diagram Design 换了条路不让模型自由发挥而是交出一整套编辑级规则——边框只用 1px 细线、零阴影、圆角不超过 10、所有坐标必须能被 4 整除强调色留给全图最多 1-2 个重点元素。产物是内嵌 SVG 的独立 HTML没有构建步骤也没有外部图片浏览器里双击即开。规则背后还有硬预算节点不超过 9 个、连线不超过 12 条超了就拆成总览加细节两张图。这份克制正是成品不像AI 生成的原因。️ 39 种图型先挑两样最常用的看架构图、流程图、时序图、状态机、ER、时间线、泳道、象限、雷达、树、层级、维恩、金字塔、柱状、折线、甘特、散点、桑基、鱼骨、Wardley 图、看板、用户旅程、部署、依赖图、UML 类图、故事地图直到数据库结构官方清单共 39 项每种都带浅色、深色、全编辑版带摘要卡片三套。挑两个最高频的讲。先是架构图组件、连接和分组一次给齐珊瑚色的焦点节点负责告诉读者先看哪。第二个是象限图用两根轴给一组对象定位常用来做项目优先级和资源取舍。其余类型如时序、泳道、甘特走的是同一套规则看懂一种即通全部。想逐类翻看可在浏览器打开 assets/index.html 的画廊页切换浅色、深色、全编辑标签。 怎么装从克隆到第一次出图的一条路只想先试用走 Claude Code 的插件通道两行命令/plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-designdiagram-design打算长期手改样式指南更建议克隆源码再用软链接指过去改动的文件不会在插件更新时被覆盖存到~/.diagram-design/profiles/的配置文件两种装法都保留git clone https://gitcode.com/gh_mirrors/di/diagram-design ~/code/diagram-design ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design装完后的第一次出图只需在对话里说一句画一张架构图前端、后端、数据库、Redis 缓存它会自己选类型、生成 HTML 并保存。想手动开工也可以直接复制模板cp skills/diagram-design/assets/template.html my-diagram.html另外新项目里出第一张图时它会先停下来问要不要做品牌映射不会把默认皮肤悄悄发进一个有品牌的项目。 品牌色映射的 60 秒流程这是被用得最多的功能。对话里说一句onboard diagram-design to https://yoursite.com它会抓取首页、提取主色板和字体栈再把检测值映射成语义角色paper 对应页面背景ink 对应主文字muted 对应次要文字accent 对应 CTA 和链接色link 对应外部调用箭头。写入前会先展示一份 diff确认一句yes才落到 style-guide.md。落盘之前还有一道 WCAG AA 对比度校验两色在图表字号9-12px下不达标时它会给出调整建议并说明原因。字体同理站点的公开网页字体会被直接引用而不是静默换成系统字体渲染后附一份保真回执。不想走自动提取直接打开 style-guide.md 手改表格即可下游 39 种图型、注释原语和画廊全部读这份文件继承的是语义角色名而不是写死的色值。服务多个客户时把结果存成命名档案再往每个客户项目根目录放一个含profile: slug的.diagram-design标记文件互不覆盖。旧图怎么翻新draw.io 和 Mermaid 的重绘路径已有 draw.io 或 Mermaid 画过的图可以把源文件交给它重绘。原则是重绘而非转换原坐标、原配色、自动布局一律丢掉只保留组件、关系、分组和方向。动笔前调四个旋钮格式html、svg 或 png、尺寸从文档内联到 16:9 幻灯片字号档位随之调整、细节faithful、balanced、simplified 三档对应节点上限 24、12、7、受众engineer、mixed、executive改的是措辞不是数量。一行命令即可/diagram-design:import-drawio platform.drawio --detailsimplified --sizeslide-16x9交付时会附一份保真台账哪些节点被合并、哪些判断被折成边上的标签、哪张游离便签被删掉账目清楚。哪些场景别用它推文或终端里的快速 ASCII 图用 wiretext 类技能更直接任何枚举清单表格或项目符号就够了前后对比两列表格一次说清单个带标签的方框写一句话即可画之前先问一句读者从图里拿到的信息是否比一段写好的文字多。答案是否就不画。回到开头那个问题AI 画的图能不能直接进文档。Diagram Design 的答案不是画得更快而是把什么算一张好图写成规范并强制执行——类型、预算、连线规则、对比度都在清单里。装好插件、跑过一次品牌映射之后拿到的不只是单张图而是一套能反复出图的规则。【免费下载链接】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），仅供参考