LLM - 用 AI 一键生成专业系统架构图：Architecture Diagram Generator 深度解析

文章目录一、为什么需要一个“AI 架构图生成器”1. 架构图的痛点2. Architecture Diagram Generator 的定位二、整体能力概览一句话描述 关键特性1. 一句话概览2. 主要特性一览三、使用流程从零开始让 AI 帮你画图1. 步骤一在 Claude 中安装 Architecture Diagram Skill2. 步骤二准备“架构描述文本”2.1 方式 A让 AI 帮你分析代码2.2 方式 B自己写一份结构化描述2.3 方式 C没有项目让 Claude 给你一个典型架构3. 步骤三让 Claude 使用 Skill 生成架构图四、典型场景与 Prompt 示例1. Web 应用架构2. AWS Serverless 架构3. 微服务 Kubernetes 架构五、视觉与设计系统如何保证图“看起来就很专业”1. 深色主题与背景2. 语义化配色方案3. 字体与层级4. 布局与分组六、输出结构与技术细节为什么它这么好集成1. 输出内容不仅是一张图2. 技术实现要点3. 为何选择 HTML 而不是 PNG/SVG 单文件七、进阶用法与团队开发流程结合1. 作为“架构评审会”的标准产物2. 将架构图纳入 CI/CD 或文档自动化3. 与“代码即文档”理念结合八、安装方式对比选择最适合你的集成路径九、实践建议与注意事项十、总结在日常研发和架构设计工作中“画图”常常是一件既重要又费时的事情既要体现系统全局结构又要让组件、数据流、云服务、安全边界一目了然还得兼顾美观与统一风格。很多团队最后要么依靠某个“画图侠”同学要么堆砌出一张风格凌乱、难以维护的架构图。随着 AI 工具的发展“让 AI 帮我画一张架构图”正在从想法变成现实。本文围绕一个非常实用的工具——Architecture Diagram Generator讲清楚它解决了什么问题、如何使用、底层是怎么设计的以及在实际工程中的落地方式和注意事项。一、为什么需要一个“AI 架构图生成器”1. 架构图的痛点在真实项目中和架构图相关的常见痛点包括产出成本高需要熟悉系统细节的人来画且要掌握专业绘图工具如 draw.io、Visio、Excalidraw 等沟通成本高、产出慢。难以保持最新代码变更频繁架构图往往半年甚至一年不更新一线开发不再信任图上的信息。风格难统一不同人画图风格、颜色、布局都不同很难保证跨团队的一致性和专业感。协作与分享割裂图文件分散在各种网盘、邮件、Wiki 中很难沉淀成统一的架构知识库。如果能把“画图”这件事交给 AI工程师只需要提供结构化的文字描述自动产出专业、统一风格的 HTML 架构图并可以在聊天中迭代修改就能极大降低成本、提升效率。2. Architecture Diagram Generator 的定位Architecture Diagram Generator 就是这样一个面向 Claude AI 的技能Skill你用自然语言描述系统架构组件、连接、技术栈、云服务等Claude 调用这个 Skill把描述渲染成一张深色主题、专业风格的系统架构图输出为单一 HTML 文件内嵌 SVG 和 CSS无需任何依赖任意浏览器即可打开。从使用者角度你只需要会写架构说明不需要掌握任何前端或绘图技术从团队角度架构图风格统一可方便地嵌入文档、分享和归档。二、整体能力概览一句话描述 关键特性1. 一句话概览使用 Claude.ai 搭配 Architecture Diagram Generator 技能只需用英文描述你的系统架构即可在几秒内生成一张深色主题、语义配色、可分享的专业架构图并以单文件 HTML 形式输出。2. 主要特性一览Architecture Diagram Generator 的核心特性可以概括为美观、专业、易用、易分享。美观的深色主题背景使用 Slate-950接近黑色搭配细腻网格纹理凸显技术氛围。语义色彩编码前端、后端、数据库、云服务、安全组件、外部系统使用不同颜色提升可读性和一致性。单文件、自包含输出输出是一个 HTML 文件其中内嵌所有 CSS 与 SVG无外部依赖直接发文件即可浏览。无需前端/设计能力不需要懂 SVG、不需要改 HTML只通过对 Claude 的文字指令迭代图形内容与样式。高度可迭代在 Claude 对话中持续修改增删组件、调整布局、修改颜色/标签立刻得到新的 HTML 输出。下文会从使用流程、示例场景、视觉与技术细节等维度深入拆解。三、使用流程从零开始让 AI 帮你画图完整的使用流程可以概括为三个步骤安装 Skill → 准备架构文字描述 → 让 Claude 生成图并迭代。1. 步骤一在 Claude 中安装 Architecture Diagram Skill这个工具是以 Claude Skill 的形式存在因此前提是你有支持 Skill 的 Claude 付费账号Pro、Max、Team 或 Enterprise。安装步骤下载architecture-diagram.zip。打开 Claude.ai进入Settings → Capabilities → Skills。点击 “ Add”上传刚才下载的 zip。打开该 Skill 的开关确保已启用。如果你不熟悉 Claude Skills 的概念可以先参考官方文档“Using Skills in Claude”了解技能的通用用法和权限模型。除了直接在 Claude Web 上安装该 Skill 还支持几种变体集成方式Claude.ai Projects 模式在某个 Project 的知识库中上传 zip适用于团队级别的项目协作。Claude Code CLI将 zip 解压到全局~/.claude/skills/或项目本地./.claude/skills/目录方便在命令行/本地开发环境中调用。手动集成只要让 Claude 能访问architecture-diagram/SKILL.md和assets/template.html就能完成最小化接入。2. 步骤二准备“架构描述文本”这个工具的输入并不是一堆配置或图形操作而是一份系统架构的自然语言描述。你可以通过多种方式获得这份描述。2.1 方式 A让 AI 帮你分析代码如果你已经有一个成熟代码库可以在 Cursor、Claude Code、Windsurf 或 ChatGPT 等开发辅助手中打开项目让它分析架构示例指令英文Analyze this codebase and describe the architecture. Include all major components, how they connect, what technologies they use, and any cloud services or integrations. Format as a list for an architecture diagram.这种方式的优势在于贴近真实实现有助于避免“图文不符”。缺点是如果代码架构本身比较混乱生成结果可能也比较复杂需要你稍作整理后再交给绘图 Skill。2.2 方式 B自己写一份结构化描述对于已经熟悉系统的架构师/核心开发来说直接写一份结构化列表通常效率更高。示例结构React 前端应用通过 HTTPS 调用 Node.js APINode.js/Express 服务作为 BFFBackend For FrontendPostgreSQL 数据库存储核心业务数据Redis 用于缓存 Session 与热点数据系统部署在 AWS 上使用 CloudFront 作为 CDN后端在 ECS 或 Lambda 上运行在实际工作中建议你尽量采用列表 分组的形式描述包括各主要组件前端、后端服务、数据库、队列、缓存等组件之间的调用/数据流向使用的云服务如 API Gateway、S3、RDS、DynamoDB 等安全边界、防火墙、安全组、认证/授权模块外部系统与第三方集成描述越清晰、越结构化生成的图越接近你心中理想的架构图。2.3 方式 C没有项目让 Claude 给你一个典型架构如果你在做方案设计或培训不绑定具体项目可以直接让 Claude 给你一个典型架构作为素材。例如What’s a typical architecture for a SaaS application?Claude 会给出一个包含多层组件、常见云服务和数据流向的典型架构你再用这个描述去生成图即可。3. 步骤三让 Claude 使用 Skill 生成架构图准备好架构描述之后就可以真正开始“让 AI 画图”了。在 Claude 对话中将描述粘贴进去并明确指示它使用架构图技能比如Use your architecture diagram skill to create an architecture diagram from this description:[PASTE YOUR ARCHITECTURE DESCRIPTION HERE]Skill 启用后Claude 会调用 Architecture Diagram Generator根据你的文字生成一个完整的 HTML 文件你可以直接下载、在浏览器中打开或者在对话中继续要求改动。接下来你可以用非常自然的方式迭代“把 Redis 从后端旁边挪到数据库下面并且用虚线连接。”“给所有外部系统加上标签标注是第三方服务。”“把数据库拆成 PostgreSQL事务和 ClickHouse分析两个节点。”“在图上标出东区和西区两个 Region用虚线框出来。”Claude 会根据你的指令生成更新后的 HTML 文件实现**“聊天式画图”**。四、典型场景与 Prompt 示例为了帮助你快速上手工具提供了若干常见场景的 Prompt 示例可直接作为模板使用。1. Web 应用架构适用于经典的“前端 后端 数据库 缓存”模式。Prompt 示例英文Create an architecture diagram for a web application with:React frontendNode.js/Express APIPostgreSQL databaseRedis cacheJWT authentication生成的架构图通常会包括浏览器/客户端 → React 前端前端 → Node.js/Express APIAPI → PostgreSQL/Redis认证模块JWT Issuer/Verifier边界、网络区域、安全组等2. AWS Serverless 架构适用于基于 AWS Serverless 技术栈的系统如 API Gateway Lambda DynamoDB。Prompt 示例Create an architecture diagram showing:CloudFront CDNAPI GatewayLambda functions (Node.js)DynamoDBS3 for static assetsCognito for auth生成的图形中会使用专门的云服务配色帮助读者快速识别云资源与自建组件的边界。3. 微服务 Kubernetes 架构适用于微服务拆分、多种语言、多种数据库组合的复杂系统。Prompt 示例Create an architecture diagram for a microservices system with:React web app and mobile clientsKong API GatewayUser Service (Go), Order Service (Java), Product Service (Python)PostgreSQL, MongoDB, and Elasticsearch databasesKafka for event streamingKubernetes orchestration生成的图会体现客户端 → API Gateway → 多个 Service各服务对不同数据库的依赖关系Kafka 在事件流中的位置Kubernetes 作为编排层的“基础设施边界”这类图对系统设计评审、培训新同学、对外技术分享都非常有帮助。五、视觉与设计系统如何保证图“看起来就很专业”一个好用的架构图工具除了能“画出来”还要“画得好看”。Architecture Diagram Generator 在视觉设计上做了很多统一性和可读性上的设计。1. 深色主题与背景背景颜色基于#020617接近 Tailwind 的slate-950营造现代感和对比度。背景叠加 40px 间距的网格图案让图形在视觉上更有“场景感”和“空间感”。深色背景的好处是在大屏展示、演讲或录屏时对比度高组件和连线更加醒目。2. 语义化配色方案组件类型有固定的配色映射便于跨图识别和理解组件类型颜色典型用途FrontendCyan客户端应用、UI、边缘设备BackendEmerald服务端、API、业务服务DatabaseViolet数据库、存储、AI/ML 相关组件Cloud/AWSAmber云服务、基础设施SecurityRose认证、授权、安全组、加密等ExternalSlate外部系统、第三方服务、抽象外部依赖这种语义配色的好处是在同一张图甚至跨多张图中只看颜色就能大致判断组件角色非常适合培训和快速浏览。3. 字体与层级字体使用 JetBrains Mono这是一款非常适合技术图表和代码展示的等宽字体。箭头在绘制时优先渲染再由组件的背景覆盖部分连线保证“线穿过盒子、但不会显得凌乱”。这种“智能分层”的处理避免了箭头与文本、组件边框相互遮挡造成的视觉噪音。4. 布局与分组在布局方面Skill 会根据你的描述自动推断合理的排列方式包括上下游数据流方向例如客户端在上数据库在下核心服务 vs 边缘组件的相对位置通过虚线框、背景块等方式表示安全组、VPC、Region、Bounded Context 等概念。你可以通过反复与 Claude 交互调整布局使其更加符合自己的理解与阅读习惯。六、输出结构与技术细节为什么它这么好集成1. 输出内容不仅是一张图Architecture Diagram Generator 输出的 HTML 文件不仅包含一张架构图还包括完整的页面结构头部区域Header展示项目名称、系统名称以及一个带动画的状态指示器比如类似“● LIVE”这种标志。主图区域Diagram使用 SVG 渲染所有组件和连线支持缩放、平滑展示。概要信息卡片Summary Cards底部通常有三个信息卡片总结关键点例如“前端栈”、“数据存储”、“安全与合规”等。页脚Footer包含项目元数据如生成时间、版本信息等。这使得输出文件不仅可以作为“图像资源”还可以作为可以直接挂在静态站点上的说明页面极适合作为架构文档的一部分。2. 技术实现要点从技术实现角度看这个工具的几个关键点包括自适应 SVG viewBoxSVG 视口宽度通常在 1000–1100 像素区间保证在各种屏幕设备上都能清晰呈现。字体加载使用 Google Fonts 加载 JetBrains Mono 字体确保跨平台统一排版效果。无 JavaScript 依赖整个输出页面不依赖任何 JS完全静态安全、稳定、易于托管。单文件结构所有 CSS、SVG 都在同一个 HTML 中减少静态资源管理成本。3. 为何选择 HTML 而不是 PNG/SVG 单文件相比直接导出 PNG/SVG 图片HTML 单文件有几个优势可以嵌入更多信息卡片、描述、元数据等可以在浏览器中放大、缩小、滚动而不失真更容易与文档系统集成比如直接用 iframe 嵌入到内部 Wiki可以随时更新替换无需调整引用路径如果作为独立页面托管。当然如果你只需要图片也可以用浏览器的“打印为 PDF”或截图工具从 HTML 中导出。七、进阶用法与团队开发流程结合1. 作为“架构评审会”的标准产物在设计新系统或对现有系统进行大规模重构时往往会开架构评审会。你可以通过以下方式把此工具纳入流程架构师事先写好目标架构的文字描述。使用 Architecture Diagram Generator 生成初版架构图。在评审会中展示 HTML 页面根据讨论结果现场调整文字描述让 Claude 生成新的图。会后把最终版 HTML 归档到架构仓库或知识库。这样可以大幅提升评审会议的可视化效果和决策效率。2. 将架构图纳入 CI/CD 或文档自动化得益于 Skill 以文件和模板为基础你可以构建自己的自动化流程例如在文档仓库中维护一份architecture.md描述文件使用 Claude Code CLI Architecture Diagram Generator在每次发布时自动生成/更新架构图 HTML把 HTML 部署到内部文档站点或者挂到 Release 说明中。虽然官方仓库没有直接给出 CI/CD 脚本但从其“ZIP 模板 SKILL.md”的结构可以看出它是完全可以与自动化流程结合的。3. 与“代码即文档”理念结合越来越多团队开始尝试“文档即代码”Docs as Code模式。你可以把架构描述视为“架构即代码”的一部分将架构描述与基础设施代码Terraform、CDK 等置于同一仓库在重大变更时要求更新架构描述通过 Architecture Diagram Generator 定期生成架构图保证文档与实践一致。八、安装方式对比选择最适合你的集成路径下表对几种安装方式做一个简单对比方便你根据团队环境选择合适方案。安装方式场景特点Claude.ai Settings个人使用 / 小团队Web 界面操作简单适合快速上手是官方推荐方式。Claude.ai Projects团队/项目级协作将 Skill 作为项目知识的一部分方便多人共享。Claude Code CLI本地开发 / 自动化集成通过命令行集成到开发脚本、CI 流程中更适合工程化落地。手动暴露 SKILL.md 等高度自定义接入、私有环境等只要 Claude 能访问 SKILL.md 和模板 HTML 即可适合有特殊合规/网络要求的环境。九、实践建议与注意事项在实际落地过程中有几个经验值得注意输入越结构化输出越可靠建议采用“组件列表 连接关系 分组/边界”三部分来描述架构而不是纯自然语言段落。多次迭代小步快跑不必一开始就期望“一步到位”的完美架构图先生成一个粗略版本再通过对话不断 refine。区分“逻辑架构”和“物理部署”可以分别生成两张图一张强调业务组件和依赖关系一张强调部署环境、Region、VPC 等。注意英文描述对齐当前 Skill 主要面向英文描述如果你在中文环境中使用推荐将关键组件和关系用英文表达以提升识别效果。与现有文档体系打通输出的 HTML 文件可以直接上传到内部 Wiki通过静态站点托管作为“架构快照”随版本一起归档。十、总结在 AI 工具快速发展的今天让工程师把时间花在“理解和设计系统”上而不是反复调整箭头和图形对齐是顺理成章的选择。Architecture Diagram Generator 将“架构描述 → 专业架构图”这一过程高度自动化通过 Claude 的 Skill 能力把过去需要半天甚至几天的绘图工作缩短到几分钟而且可以通过自然语言不断迭代优化。对于个人开发者它是一个让你“随手就能做出漂亮架构图”的生产力工具对于团队和企业它是“架构文档工程化”的重要一环可以帮助你建立更加统一、可维护的架构资产库。如果你正在为项目准备技术分享、设计评审、培训材料或者只是想把脑中的系统结构更清晰地呈现出来不妨试试这套 AI 驱动的架构图生成方案让 AI 替你画图把精力留给真正重要的系统设计决策。