SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场architecture-diagram-zh

architecture-diagram-zh

设计与创作

查看项目

更新于 10-16 08:23

技能介绍

用途

本技能用于创建专业的技术架构图，输出为独立的 HTML 文件，包含内联 SVG 图形和 CSS 样式，可直接在浏览器中打开。适用于系统架构、部署架构、技术架构、基础设施拓扑、云架构可视化、安全架构、网络拓扑、组件关系图等技术图表的绘制，支持中文标注和说明。

触发场景包括：用户提出「画一个架构图」「生成架构图」「画个图」，或提到系统架构 / 部署架构 / 技术架构、流程图 / 组件关系图 / 拓扑图、infrastructure diagram / architecture diagram；用户粘贴代码并要求分析架构；或用户描述了系统组件及其关系。

主要能力

  • 双主题切换：支持深色（默认）与浅色两种主题，通过页眉右侧的切换按钮一键切换，选择保存到 localStorage，下次打开自动恢复。实现方式为 CSS 自定义属性加 data-theme 属性切换，SVG 元素通过 CSS class（text-primary、text-secondary、mask-bg、grid-line、arrowhead-color）适配主题，并使用 CSS transition 实现平滑切换动画。组件描边色在两种主题下保持不变，仅切换背景、文字、网格、边框等基础色。
  • 主题配色：深色主题融合暖色深底与暖白文字，页面背景 #141413、卡片背景 rgba(20, 20, 19, 0.5)、遮罩背景 #1a1a18、主文字 #faf9f5、副文字 #b0aea5 等；浅色主题页面背景 #f5f4ed、卡片背景 rgba(250, 249, 245, 0.85)、遮罩背景 #faf9f5、主文字 #141413、副文字 #5e5d59 等。
  • 组件语义配色：前端（青色 #22d3ee）、后端（翡翠绿 #34d399）、数据库（紫色 #a78bfa）、云服务（琥珀色 #fbbf24）、安全组件（玫红色 #fb7185）、消息队列（橙色 #fb923c）、外部/通用（石板灰 #94a3b8）、AI/智能（亮紫 #c084fc）。
  • 字体与排版：使用 JetBrains Mono 等宽字体，通过 Google Fonts 引入。
  • 视觉元素：背景网格纹理、圆角组件方框（rx=8、1.5px 描边、半透明填充）、阴影系统、圆角体系（组件方框 8px、卡片容器 12px、标签徽章 6px）、安全组虚线描边、区域边界大虚线描边、SVG marker 箭头、认证安全流玫红虚线、消息队列橙色连接元素。
  • 处理透明填充遮罩：组件方框使用半透明填充时，先绘制一个不透明背景矩形（class="mask-bg"）以完全遮住箭头，再叠加半透明样式组件。箭头应在 SVG 中较早绘制，使其渲染在组件方框之下。
  • 中文适配：组件标签、注释、卡片内容使用中文；技术专有名词保留英文；中文之间无空格，中英文之间加空格；中文字符宽度约为英文 2 倍，标准中文标签组件宽度建议 140-180px；标题格式如「【项目名】系统架构」。
  • 页面结构：页眉（项目标题带脉冲指示灯动画、副标题）、主 SVG 架构图（圆角边框卡片内）、信息摘要卡片（图表下方 3 张卡片网格）、页脚（最小化元数据行）。

使用方式

工作流程为三步：

  1. 收集信息：若用户未提供完整架构描述，主动询问系统包含哪些主要组件/服务、组件之间的连接关系和数据流、使用的技术栈和云服务、是否有安全组与网络分区等边界；若用户提供代码库或项目文件，则自行分析提取架构信息。
  2. 生成架构图：根据收集的信息，使用本技能的设计规范和模板生成 HTML 文件，可复制并自定义 assets/template.html 模板，更新标题与页眉文字、调整 SVG viewBox 尺寸（默认 1000 x 680）、增删或重定位组件方框、绘制连接箭头、更新三张摘要卡片与页脚元数据。
  3. 输出结果：输出一个完整、可直接在浏览器打开的 .html 文件。

输出文件要求：内嵌 CSS（除 Google Fonts 外无外部样式表）；CSS 自定义属性定义双主题；内联 SVG（无外部图片），SVG 文字使用 CSS class 适配主题；少量 JavaScript 用于主题切换和 localStorage 持久化；页眉右侧包含太阳/月亮图标切换按钮。

关键实现细节：组件方框模板使用 class 而非硬编码颜色（class="mask-bg"、"text-primary"、"text-secondary"、"grid-line"、"arrowhead-color"），组件描边色和彩色标签不使用 class。垂直堆叠组件时标准组件高度为服务 60px、较大组件 80-120px，组件间最小垂直间距 40px，内联连接器放在组件间隙中。图例必须放在所有边界框之外，至少位于最低边界下方 20px，必要时扩展 SVG viewBox 高度。

适用场景

常见架构类型包括：Web 应用架构（前端框架 + 后端 API + 数据库 + 缓存 + 认证）、微服务架构（API 网关 + 多个微服务 + 消息队列 + 服务注册发现 + 分布式数据库）、云原生架构（CDN + 负载均衡 + 容器编排 + 云数据库 + 对象存储 + 监控）、Serverless 架构（API 网关 + 函数计算 + 云数据库 + 对象存储 + 消息队列）、数据流架构（数据源 + 数据采集 + 流处理 + 数据仓库 + 可视化）。

限制

资料未提供关于定价、收费模式、支持平台范围、图规模上限及性能指标的信息。输出为单一 HTML 文件，依赖 Google Fonts 提供 JetBrains Mono 字体，其余样式与图形均内联，需在现代浏览器中打开。