Diagram Design革命性AI图表设计工具14种编辑级图表一键生成【免费下载链接】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是一款革命性的AI图表设计工具专为Claude Code打造提供13种编辑级图表类型全部采用自包含的HTMLSVG格式无需依赖外部资源也不会产生杂乱的阴影效果。无论是架构图、流程图还是时序图都能轻松生成专业级别的可视化内容让你的设计不再被设计师嫌弃。为什么选择Diagram Design传统图表工具往往存在诸多痛点要么需要复杂的设计软件如Figma耗费大量时间调整颜色和样式要么生成的图表样式千篇一律圆角方框毫无特色与网站整体风格格格不入。而Diagram Design的出现彻底改变了这一现状。只需60秒Diagram Design就能读取你的网站自动映射颜色和字体生成符合你品牌风格的图表。无需繁琐的手动操作告别30分钟的颜色选择环节让你专注于内容本身。Diagram Design架构图展示了组件与连接关系采用简洁的设计风格突出核心元素丰富的图表类型Diagram Design提供14种不同类型的图表满足各种场景需求每种图表都有三种变体简约浅色、简约深色和全编辑模式。所有图表都可以直接在浏览器中打开无需构建步骤不依赖JavaScript也没有外部图片引用。主要图表类型一览图表类型用途示例架构图展示组件及其连接关系流程图呈现决策逻辑和流程步骤时序图展示随时间推移的消息传递状态机图描述状态及状态间的转换ER图/数据模型展示实体、字段及关系时间线图在时间轴上展示事件Diagram Design的象限图展示了如何通过双轴定位元素适用于优先级排序等场景更多专业图表除了上述常见图表Diagram Design还提供多种专业图表类型泳道图展示跨职能流程和交接嵌套图通过包含关系展示层次结构树状图呈现父级与子级关系层级图展示堆叠的抽象层次维恩图展示集合之间的重叠关系金字塔图/漏斗图展示排名层次或转化率下降情况顾问式矩阵图专业的2×2场景矩阵带有命名单元格你可以通过打开skills/diagram-design/assets/index.html在浏览器中浏览所有14种图表的实时画廊切换浅色/深色/全编辑模式标签。快速安装指南方法一克隆仓库并创建符号链接# 克隆仓库到本地然后将内部技能链接到Claude Code的技能目录 git clone https://gitcode.com/gh_mirrors/di/diagram-design.git ~/code/diagram-design ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design真正的技能位于仓库内的skills/diagram-design/目录这样相同的目录结构可以作为Claude Code插件、Codex插件和独立技能使用。符号链接将Claude Code指向该内部目录。重启Claude Code后技能将注册为diagram-design当你要求Claude制作图表时会自动激活。方法二作为插件安装这种方法安装更快但技能将存储在插件缓存中因此对references/style-guide.md的编辑不会在插件更新后保留。如果你只是想试用选择这种方法如果你计划手动自定义样式指南请使用上述克隆方法。Claude Code/plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-designdiagram-designClaude Cowork自定义 → 目录 → 插件 →→ 粘贴cathrynlavery/diagram-design→ 同步然后从个人列表中安装。Codexnpx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design个性化品牌风格Diagram Design的核心优势在于以你的颜色和排版生成编辑级质量的图表而不是通用模板。默认情况下图表以简洁的纯黑原子橙调色板白烟纸、纯黑墨水、原子橙强调色、蓝灰色静音色、银色细线呈现。虽然足以直接截图使用但60秒的入职流程会更好——该技能将从你的网站提取品牌信息并将其应用于每个图表。风格定制流程你 onboard diagram-design to https://yoursite.com Claude → 获取首页 → 提取主色调和字体栈 → 将检测到的值映射到语义角色 paper, ink, muted, accent, link → 显示建议的差异 → 将你的标记写入 references/style-guide.md 你 yes, apply it现在每个新图表都将使用你的颜色。你网站的背景色将成为图表背景CTA颜色成为焦点强调色正文字体栈成为节点标签字体。从网站提取的内容从网站检测到对应标记body背景paper标记主要文本颜色ink标记次要/标题文本muted标记卡片或容器paper-2标记最常用的品牌颜色CTA、链接、标题accent标记h1字体族title字体body字体族node-name字体code/pre字体sublabel字体Diagram Design的层级图展示了堆叠的抽象层次可根据品牌风格自定义颜色和字体对比度自动检查在写入标记之前该技能会验证ink在paper上的WCAG AA对比度。如果你的网站颜色在图表尺寸9-12px下对比度不达标它会建议调整值并解释原因。手动覆盖更喜欢手动设置标记打开skills/diagram-design/references/style-guide.md并编辑表格。所有下游内容都从此处读取——所有14种图表、注释原语和画廊都继承语义角色名称如accent而非#eb6c36。快速上手# 打开画廊查看所有14种图表 open ~/.claude/skills/diagram-design/assets/index.html # 在Claude Code中只需这样请求 # Make me an architecture diagram of my app: frontend, backend, database, Redis cache. # I need a quadrant showing Q2 projects by impact vs effort. # Give me a sequence diagram of the OAuth handshake.Claude会选择合适的类型构建HTML并保存。你也可以直接从模板开始cp assets/template.html my-diagram.html # 简约浅色 cp assets/template-full.html my-diagram.html # 带摘要卡片的编辑模式设计理念最高质量的做法通常是删除。每个节点都要证明自己的存在价值。强调色仅用于1-2个读者应该首先关注的元素。目标密度4/10。Diagram Design遵循简约而专业的设计原则一个强调色每个图表1-2个焦点元素三种字体族Instrument Serif标题和斜体标注、Geist sans节点名称、Geist Mono技术子标签1px细线边框无阴影最大边框半径10px每个坐标、宽度和间距都能被4整除——这是确保图表不会显得像AI生成的关键等宽字体用于技术内容端口、URL、字段类型而非统一的开发美学珊瑚色焦点节点将视线吸引到1-2个重要事物上完整规范参见SKILL.md。何时不使用此技能用于推文或终端输出的快速unicode图表→ 使用wiretext风格的技能任何列表→ 使用表格或项目符号前后对比→ 使用表格单一形状图表—— 带标签的单个框 → 只需写句子绘图前请思考*读者从图表中学到的会比从一篇写得好的段落中学到的更多吗*如果不是就不要绘制。结语Diagram Design为AI图表设计带来了革命性的变化让普通用户也能轻松创建专业级别的编辑图表。无论是技术文档、产品展示还是学术研究14种精心设计的图表类型都能满足你的需求。通过简单的安装和个性化设置即可让图表完美融入你的品牌风格告别千篇一律的通用模板。立即尝试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），仅供参考