# diagram-design - Claude Code图表生成插件

> 27种图表一键生成，自动匹配你的品牌配色，设计师不会骂的AI图表

## 核心亮点

Claude Code / Codex / Pi 的图表生成插件，**18.8k star**。一句话：让 AI 生成设计师不会骂的技术图表。

## 27 种图表类型

架构图、流程图、时序图、ER 数据模型、甘特图、雷达图、象限图、状态机、泳道图、组织架构图、维恩图、金字塔、时间线、嵌套层级、树状图、数据流图、循环飞轮、柱状图、折线图、散点图、IT 现状图、高阶架构图、流程图（多角色）、Medallion 数据分层、数据流、数据权限矩阵、顾问 2×2 矩阵

## 三种风格变体

每种图表都有：极简浅色 / 极简深色 / 全编辑风格

纯静态 HTML + SVG 输出，**零构建步骤**，浏览器直接打开。

## 品牌自动匹配

给它你的网站 URL，自动提取：
- 主背景色 → 图表底色
- 主文字色 → 节点文字
- CTA/品牌色 → 高亮强调色
- 字体栈 → 标题/正文/代码字体

生成后自动做 WCAG AA 对比度检查，不达标会提示调整。

## 支持的 AI 工具

- **Claude Code**：plugin marketplace 安装
- **OpenAI Codex**：plugin 安装
- **Pi**：extension 安装

## 适合谁

写技术博客、架构文档、产品文档的人。不想打开 Figma 磨 30 分钟调颜色，让 AI 直接生成匹配品牌风格的专业图表。

## GitHub

https://github.com/cathrynlavery/diagram-design

---

**分类**：软件
**标签**：自动 · 生成 · 图表
**作者**：子龙
**链接**：https://octohz.com/p/2026