之前用draw.io的MCP画架构图，能用，但样式总感觉差点意思------配色偏老气，布局也不够精致。 最近发现一款叫
architecture-diagram-generator的开源Skill，跟Claude描述一下系统结构，几秒钟就出一张高大上的架构图，效果比我之前画的强多了，这里给大家分享下。
简介
architecture-diagram-generator是一款专为AI设计的系统架构图生成Skill，支持Cursor、Claude Code、Windsurf等AI编程工具，目前在Github上已有6.3k+star。实际用下来，几秒钟就能出一张像样的架构图，你只管描述系统长什么样，剩下的交给AI。
该Skill具有如下特性：
- 零设计门槛：仅需描述你的项目架构就行，不用懂配色、不用懂布局。
- 迭代飞快：想加组件、调布局、换样式？一句话的事，AI秒改。
- 分享零成本：输出就是一个HTML文件，浏览器打开即看，不用装任何东西。
- 内置导出：图表自带复制/PNG/PDF按钮------这点真的省心，不用再截图了。
下面是该Skill生成的架构图，效果还是挺炫酷的！
安装
architecture-diagram-generator的安装非常简单，下载压缩包，导入就可以使用了，这里以Claude Desktop为例。
- 首先我们需要去它的release页面下载对应的压缩包，地址：github.com/Cocoon-AI/a...
- 在Claude Desktop中选择
自定义->技能->上传技能功能，然后选择下载好的压缩包上传即可完成安装。
这或许是一个对你有用的开源项目，mall项目是一套基于 SpringBoot3 + Vue3 的电商系统（Github标星60K），后端支持多模块和微服务架构，采用Docker和K8S部署。包括前台商城项目和后台管理系统，能支持完整的订单流程！涵盖商品、订单、购物车、权限、优惠券、会员、支付等功能！
- Boot项目：github.com/macrozheng/...
- Cloud项目：github.com/macrozheng/...
- 文档网站：www.macrozheng.com
项目演示：
使用
画架构图
- architecture-diagram-generator的使用还是非常方便的，例如我想画一张mall电商实战项目的系统架构图，通过
/architecture-diagram命令调用skill来画图即可，具体提示词如下：
bash
/architecture-diagram 画一张mall项目的系统架构图，项目地址：D:\developer\github\mall- 最终画出的mall项目架构图如下，项目的分层结构非常清晰，配色也不错，比draw.io画的感觉更上档次；
- 最终的产物是一个html文件，点击右上角的按钮可以选择图片的下载格式，支持复制/PNG和PDF三种；
画流程图
- architecture-diagram-generator是专门用来画架构图的，如果你想画流程图的话需要使用
process-flow-diagram-generator这个Skill，地址：github.com/Cocoon-AI/p...
- 我这里根据mall项目中的generateConfirmOrder方法，画了一张订单功能中生成确认单的流程图，具体提示词如下；
arduino
/process-flow-diagram 根据mall项目中生成确认单流程（generateConfirmOrder方法），画一张业务流程图- 最终效果如下，流程非常清晰，简单而直观；
- 为了测试下这个Skill的能力，我还让它生成了一个相当复杂的订单生成流程图，也是顺利完成的，效果如下；
总结
architecture-diagram-generator是一款非常实用的架构图生成Skill，无需设计基础，几段描述就能生成一张高颜值的深色主题架构图，输出为独立HTML文件，分享和导出都很方便。
搭配同系列的process-flow-diagram-generator，架构图和流程图都能轻松搞定，相比draw.io不仅上手门槛更低，出图效果也更现代化，感兴趣的小伙伴可以尝试下它。