Diagram Design：革命性AI图表设计工具，14种编辑级图表一键生成-平芜编程栈

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-design

Diagram Design是一款革命性的AI图表设计工具，专为Claude Code打造，提供13种编辑级图表类型，全部采用自包含的HTML+SVG格式，无需依赖外部资源，也不会产生杂乱的阴影效果。无论是架构图、流程图还是时序图，都能轻松生成专业级别的可视化内容，让你的设计不再被设计师嫌弃。

为什么选择Diagram Design？

传统图表工具往往存在诸多痛点：要么需要复杂的设计软件如Figma，耗费大量时间调整颜色和样式；要么生成的图表样式千篇一律，圆角方框毫无特色，与网站整体风格格格不入。而Diagram Design的出现，彻底改变了这一现状。

只需60秒，Diagram Design就能读取你的网站，自动映射颜色和字体，生成符合你品牌风格的图表。无需繁琐的手动操作，告别30分钟的颜色选择环节，让你专注于内容本身。

Diagram Design架构图展示了组件与连接关系，采用简洁的设计风格，突出核心元素

丰富的图表类型

Diagram Design提供14种不同类型的图表，满足各种场景需求，每种图表都有三种变体：简约浅色、简约深色和全编辑模式。所有图表都可以直接在浏览器中打开，无需构建步骤，不依赖JavaScript，也没有外部图片引用。

主要图表类型一览

图表类型	用途	示例
架构图	展示组件及其连接关系
流程图	呈现决策逻辑和流程步骤
时序图	展示随时间推移的消息传递
状态机图	描述状态及状态间的转换
ER图/数据模型	展示实体、字段及关系
时间线图	在时间轴上展示事件

Diagram Design的象限图展示了如何通过双轴定位元素，适用于优先级排序等场景

快速安装指南

方法一：克隆仓库并创建符号链接

# 克隆仓库到本地，然后将内部技能链接到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-design@diagram-design

Claude Cowork：自定义 → 目录 → 插件 →+→ 粘贴cathrynlavery/diagram-design→ 同步，然后从个人列表中安装。

Codex：

npx 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驱动的图表设计新方式，让你的可视化内容脱颖而出！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Diagram Design：革命性AI图表设计工具，14种编辑级图表一键生成