用途：根据用户请求创建专业的技术架构图，生成单个自包含 HTML 文件，图形以内联 SVG 绘制、样式以内嵌 CSS 定义，不依赖外部图片或样式表。适用于系统架构、基础设施、云服务、安全拓扑等可视化需求。
主要能力：内置设计系统，按组件语义配色（前端青色、后端翠绿、数据库紫罗兰、云/AWS 琥珀、安全玫瑰、消息总线橙色、外部/通用石板灰）；统一使用 JetBrains Mono 字体；支持服务框、安全组虚线圈、区域边界圈、带箭头的连接线、消息总线连接器等元素；提供头部标题栏、主图卡片、三张摘要卡片和底部元数据。
使用方式：复制并修改 resources/template.html，更新标题与头部文字，按需调整 SVG viewBox（默认 1000×680），增删或移动组件框，绘制连线箭头，更新摘要卡片与页脚。输出为单个 .html 文件，可直接在现代浏览器中打开。内置导出工具栏（折叠为 ⋯ 图标）支持复制高分辨率 PNG 到剪贴板、下载 PNG、导出嵌入 PNG 的单页 PDF，全部基于 html2canvas 截图实现。
布局要求：垂直堆叠组件需留出至少 40px 间距，消息总线放在组件间隙内避免重叠；图例必须放在所有边界框之外，至少低于最低边界 20px，必要时扩展 viewBox 高度。连线箭头应早于组件框绘制，使其位于底层；因组件使用半透明填充，如需完全遮挡箭头可先画不透明背景矩形。
限制与注意事项：剪贴板 API 需用户手势且要求安全上下文（https/file/localhost）；html2canvas 对 SVG foreignObject 渲染不稳定，建议仅用普通 SVG 形状与文本；模板保留 html2canvas 1.4.1 与 jsPDF 2.5.2 两个带 SRI 哈希的 CDN 脚本，不要修改哈希，升级版本需重新计算；提高 scale（2 至 3 或 4）可获得更高分辨率输出。未使用 JavaScript 实现动画，仅用纯 CSS 动画。