Diagram Design：为 Claude Code 和 Codex 生成专业图表的开源 Skill

Diagram Design

Diagram Design 是一个专门给 AI Agent 做图表设计的开源 Skill，目前支持 Claude Code、Codex 和 Pi。它不是再造一个 Figma，而是让 Agent 根据内容生成架构图、流程图、时序图、甘特图、象限图等更有编辑设计感的图表。

比较有意思的是，它还能读取你的网站配色和字体，把生成结果往自己的品牌风格上靠，省掉 AI 画完图之后再手动改颜色、字体和布局这一轮折腾。

核心特点

• 内置 28 种视觉类型，包括 Architecture、Flowchart、Sequence、ER、Timeline、Gantt、Radar、Treemap 等。
• 支持 Claude Code、Codex、Pi，并采用 MIT License 开源。
• 默认输出静态 HTML，同时提供 minimal light、minimal dark、full-editorial 三种风格，还支持可选动态效果。
• 可以读取网站颜色和字体建立品牌样式，也支持将 Mermaid、draw.io 内容重新绘制成指定尺寸和细节级别的图表。

实际应用场景

适合写技术文章、产品文档、架构方案和汇报材料时让 Agent 直接出图，解决 AI 默认图表太模板化、后期还得进 Figma 手动调整的问题。

开源地址

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

使用

Claude

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

Codex

codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design