按住下方图标，点击小程序

免费领取AI学习资料、精选提示词

说真的，每次写技术文章或者做方案汇报的时候，最让人头疼的不是文字部分而是配图。

打开Figma调半天颜色，拖半天对齐，最后出来的东西还是跟整篇文章的风格格格不入。

现在大家都习惯让AI帮忙生成图表，结果呢？出来的东西千篇一律，全是那种一眼就能看出是AI画的通用模板，放在自己的博客或者产品文档里，违和感拉满。

今天给大家介绍一个曾拿下github每日最佳超17100星的图表利器Diagram Design，并且完美适配Claude Code、Codex。

开源地址：https://github.com/cathrynlavery/diagram-design

简单来说，Diagram Design里面包含了27种不同类型的图表模板，全部用纯HTML加SVG做的，不用什么复杂依赖，打开浏览器就能直接用。

咱们接着说下主要功能。Diagram Design的每一种图表都做了三种变体，分别是极简亮色、极简暗色和完整编辑级。

你不需要自己选配色方案，不需要纠结用哪个风格，直接告诉AI你要什么类型的图，内容是什么，剩下的全自动搞定。

具体有哪些类型呢？我挑几个高频的说说。架构图用来展示系统组件和连接关系，做技术方案的时候几乎离不开。

流程图处理决策逻辑，比如用户注册流程、订单状态流转这种。时序图展示消息在时间轴上的传递，微服务之间的调用关系用这个最直观。泳道图适合跨部门协作流程，每个角色一条泳道一目了然。

再往后面还有象限图做优先级排序，金字塔图做层级展示，雷达图做多维度对比，甘特图做项目排期，散点图看数据分布等等。

甚至连数据平台的安全矩阵和集成架构这种比较垂直的场景都覆盖到了。

光有图表类型还不够，真正让diagram-design跟其他方案拉开差距的，是品牌适配能力。

比如，你只需要跟AI说一句「帮我把diagram-design对接到 https://你的网站.com」这样的提示词，整个流程就自动跑起来了。

项目会去抓取你网站首页的样式信息，提取主色调、字体栈、背景色这些视觉元素，然后自动映射到图表的设计系统里。

你网站的背景色变成图表的底色，你品牌的主色调变成图表的强调色，你正文用的字体变成节点标签的字体。

整个过程大概60秒，不需要你手动去取色值，不需要打开任何设计软件。而且这里有个细节做得很贴心。