这个技能画出来的架构图的质量是真的太高了！一款 Claude AI Skill，通过自然语言描述自动生成深色主题系统架构图，输出为独立 HTML/SVG 文件，无需设计技能，支持实时迭代与团队分享。
为什么这个工具值得关注
想象一下这样的场景：你正在向 CTO 汇报系统设计方案，需要一张清晰的架构图。传统做法是打开 Draw.io 或 Figma，拖拽组件、调整对齐、选择配色——至少消耗 30 分钟。而 Architecture Diagram Generator 把这个过程压缩到 30 秒。
它的核心逻辑很简单：人类描述系统，AI 负责绘制。你只需用自然语言列出组件和连接关系，Claude 就能生成一张专业级的深色主题架构图。这种"描述即产出"的工作流，正是 AI 时代工具设计的典型范式——降低专业门槛，让思考与表达同步发生。
三步上手的极简工作流
这个 Skill 的使用流程被设计得异常简洁，符合"快速启动"的产品哲学。
第一步是安装 Skill。你需要下载 architecture-diagram.zip 文件，然后在 Claude.ai 的设置中找到 Capabilities → Skills，上传并启用。注意这需要 Claude Pro、Max、Team 或 Enterprise 订阅。如果你使用 Claude Code CLI，也可以将 zip 解压到 ~/.claude/skills/ 目录实现全局或项目级安装。
第二步是准备架构描述。这里有三种策略可选。Option A 是让 AI 分析你的代码库——把项目丢给 Cursor、Claude Code 或 Windsurf，让它提取组件和依赖。Option B 是手写描述，比如"React frontend talking to a Node.js API, PostgreSQL database, Redis for caching"。Option C 是直接问 Claude"一个典型的 SaaS 应用架构是什么样的"，让它给你模板。
第三步是触发生成。把描述粘贴给 Claude，加上一句"Use your architecture diagram skill to create an architecture diagram from this description"，等待几秒，一张完整的 HTML 架构图就会出现在输出中。
设计理念：深色主题与语义化配色
这个 Skill 的视觉设计有其独特考量。它采用 Slate-950 深色背景配合 40px 网格纹理，营造出技术文档的专业氛围。字体选用 JetBrains Mono，这是程序员群体高度认可的等宽字体，带有浓厚的工程美学气质。
配色方案遵循语义化原则，每种颜色对应特定类型的组件：Cyan（青色）用于 Frontend 层，包括客户端应用和 UI；Emerald（翠绿）代表 Backend，涵盖服务器、API 和服务；Violet（紫罗兰）标记 Database，包含数据库、存储和 AI/ML 组件；Amber（琥珀色）对应 Cloud/AWS 等基础设施；Rose（玫瑰色）用于 Security，如认证和加密模块；Slate（石板灰）则留给 External 外部系统。
这种颜色编码不是随意选择，而是基于认知心理学——人类对颜色的分类记忆远强于文字标签。当你看到一张架构图时，颜色能瞬间传达组件类型，减少认知负荷。
技术实现：自包含的 SVG 架构
生成的输出是一个独立的 HTML 文件，这意味着零依赖、零配置。文件内部嵌入了完整的 CSS 样式和 inline SVG，不需要外部 JavaScript 或网络请求即可在任何现代浏览器中正常渲染。
技术细节上，SVG 使用 viewBox 实现响应式缩放，典型宽度为 1000-1100px。Z-ordering 经过精心设计：箭头连接线首先绘制，然后通过半透明背景层遮盖，确保组件框体浮于连线之上，形成清晰的视觉层次。
输出文件包含四个核心部分：Header 展示项目标题和动画状态指示器；Main diagram 是 SVG 架构图本身；Summary cards 提供三张信息卡片突出关键细节；Footer 记录项目元数据。这种结构化设计让单文件也能承载丰富的信息密度。
典型应用场景与 Prompt 示例
对于常见的 Web 应用架构，你可以这样描述："React frontend, Node.js/Express API, PostgreSQL database, Redis cache, JWT authentication"。Claude 会生成包含这五层组件的完整架构图，并用箭头标注数据流向。
如果是 AWS Serverless 场景，描述可以是："CloudFront CDN, API Gateway, Lambda functions (Node.js), DynamoDB, S3 for static assets, Cognito for auth"。Skill 会自动识别 AWS 服务并使用 Amber 配色，同时标注各组件间的调用关系。
微服务架构的描述则更复杂："React web app and mobile clients, Kong API Gateway, User Service (Go), Order Service (Java), Product Service (Python), PostgreSQL, MongoDB, Elasticsearch databases, Kafka for event streaming, Kubernetes orchestration"。Claude 会处理这种多语言、多数据库、多中间件的复杂拓扑，自动分组和布局。
迭代与协作：对话式调优
这个 Skill 的真正威力在于迭代能力。生成初版后，你可以像与同事讨论一样继续优化："把 Redis 移到 API Gateway 旁边"、"给数据库层加个 VPC 边界"、"把箭头颜色改成更亮的蓝色"。Claude 会实时更新 HTML 输出，保持设计一致性。
分享也极其简单——直接发送 HTML 文件即可。接收方无需安装任何软件，双击即可在浏览器中查看。这比发送 Draw.io 源文件或 Figma 链接要方便得多，尤其适合技术文档、邮件附件或 Slack 传输。
局限与适用边界
需要明确的是，这个 Skill 并非万能。它更适合展示系统的高层架构和组件关系，而非详细的类图或时序图。如果你的需求是精确到 API 参数级别的技术文档，传统的 UML 工具可能更合适。
此外，订阅门槛是一个现实限制。Claude Pro 起价为每月 20 美元，对于个人开发者可能不算便宜。但考虑到它节省的时间成本——一张专业架构图的市场设计费用通常在数百美元——这个投入对于需要频繁产出架构图的技术团队来说是合理的。
同类工具对比
与 Mermaid 或 PlantUML 这类文本转图表工具相比，Architecture Diagram Generator 的优势在于视觉美观度和零配置。Mermaid 需要学习特定的语法，且默认主题较为朴素；而这个 Skill 接受自然语言输入，输出的是精心设计的深色主题 SVG。
与 Draw.io、Lucidchart 这类图形化工具相比，它的优势在于速度和一致性。你不需要手动对齐组件、选择配色、调整字体——AI 会自动处理这些设计决策，确保每张图都符合统一的视觉规范。
总结
Architecture Diagram Generator 代表了一类新兴的 AI 工具形态：将专业设计能力封装成可复用的 Skill，通过自然语言接口降低使用门槛。对于技术架构师、全栈开发者和技术写作者来说，它提供了一个从思维到可视化的快速通道。如果你已经在使用 Claude Pro，这个 Skill 值得加入你的工作流工具箱。
彩蛋
这项技能现已内置于 Hermes！
使用
/architecture-diagram
更新 hermes 后，即可开始使用！
感谢该技能的作者将其设为 MIT 许可，我们得以直接将其移植到 Hermes Agent 中，作为内置技能！