architecture-diagram-generator
用自然语言描述即可生成专业架构图
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：architecture-diagram-generator。 它的用途是：用自然语言描述即可生成专业架构图 完整的 Skill 内容见：https://321skill.com/skills/architecture-diagram-generator/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'Use your architecture diagram skill to create an architecture diagram for a web application with React frontend, Node.js/Express API, PostgreSQL database, Redis cache, and JWT authentication.' 它会自动生成一个深色主题的HTML架构图，包含所有组件及连接线，并支持一键导出。
介绍
这个Skill解决了手动绘制架构图效率低、门槛高的问题。在实际开发中，无论是系统设计评审、技术方案汇报还是文档编写，开发者经常需要耗费大量时间使用Draw.io、Visio或编写Mermaid代码来绘制架构图，不仅过程繁琐，而且迭代修改成本高。
使用方式很简单，你只需要在Claude中启用该Skill，然后用自然语言描述你的系统架构即可。例如，列出前端、后端、数据库、缓存、云服务等组件及其连接关系，Claude就会自动生成一个深色主题的独立HTML文件，其中包含完整的架构图，并内置复制、导出PNG和PDF的按钮。之后你还可以通过对话让Claude添加组件、调整布局或修改样式，实现快速迭代。
它非常适合需要频繁绘制架构图的团队或个人。尤其是那些正在进行系统设计、撰写技术文档、准备项目汇报或向客户展示方案的全栈开发者、后端工程师和产品经理。通过该Skill，你将告别手动绘制环节，把精力集中在架构本身。
建议在描述架构时，尽量明确列出所有组件及其技术栈（如“React前端+Node.js API+PostgreSQL数据库”），以获得更准确的图表。需要注意的是，该Skill依赖Claude的Code Execution功能，生成时需要网络连接，且生成的架构图样式固定为深色主题，暂时无法自定义配色方案。
常见问题
如何安装这个Skill？
从GitHub仓库下载architecture-diagram.zip，然后在Claude.ai中进入Customize→Skills，点击+创建技能，选择Upload a skill上传zip文件即可启用。
生成的HTML文件在哪里？
Claude会在对话中直接提供HTML文件的下载链接，打开即可在浏览器中查看完整的深色主题架构图。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/architecture-diagram-generator/raw/index.md 读取 architecture-diagram-generator 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/architecture-diagram-generator/raw/index.md（查看排版版本）