科技产品架构图生成器

将一段产品描述，自动转化为可用于方案汇报与技术文档的专业级架构图。

Overview

本技能把任意产品形态拆解为 5 层标准架构（自上而下：用户层 → 应用层 → 服务层 → 数据层 → 基础设施层），智能推断每层模块划分与技术选型，自动标注层间调用 / 数据流向，并产出 4 种格式：可视化架构图（HTML/SVG，科技蓝紫风格）、Mermaid 代码、ASCII 图、结构化 JSON。生成的 HTML 图通过 scripts/generate_diagram.py 由 JSON 规格确定性渲染，保证每次输出结构稳定、可直接用于 PPT / 文档。

When to Use

• 用户给出产品名称 + 类型 + 核心功能，需要"画一张架构图"。
• 方案汇报、技术评审、招标材料、产品白皮书需要标准分层架构。
• 用户要 Mermaid / Draw.io / Figma 可导入的架构描述。
• 触发语示例："帮我生成智链溯源的架构图""SaaS 产品技术架构怎么画""把这个产品做成 5 层架构"。

Input Parameters

从用户消息中解析以下字段（缺失时主动追问必填项）：

若 product_type 不在上表，按最接近的类型推断，并在输出中注明假设。

Workflow

按以下 5 步执行，不要跳步。

Step 1 — 解析与补全参数

提取 6 个参数。必填项缺失则一次性追问（用 AskUserQuestion 或自然语言）。scale_level 缺省为"中型"，tech_preference 缺省为"自研·开源"。

Step 2 — 推断 5 层架构模型

固定 5 层（自上而下）：

1. 用户层 User Layer — 终端触点：Web / 小程序 / App / 开放 API / 大屏
2. 应用层 Application Layer — 面向功能的产品模块（由 core_features 直接映射，每个功能 1 个模块）
3. 服务层 Service Layer — 共享能力：网关 / 认证 / 业务微服务 / 消息队列 / 规则引擎 / 调度
4. 数据层 Data Layer — 存储与计算：关系库 / 缓存 / 搜索引擎 / 数仓 / 对象存储 / 时序库
5. 基础设施层 Infrastructure Layer — 运行基座：容器 / 负载均衡 / 网络 / 监控 / 安全 / CI-CD

读取 references/component-library.md 中对应 product_type 的推荐组件，结合 core_features 与 scale_level 裁剪。

Step 3 — 技术栈智能推荐

• 依据 tech_preference 选择命名体系（阿里云 ACK/OSS/SLB、腾讯云 TKE/COS/CLB、AWS EKS/S3/ALB、开源 K8s/MinIO/Nginx）。
• 每层给出 1–2 项关键技术选型，写入 tech_selection。
• 用户可随时替换；替换时保持层归属合理。

Step 4 — 解析调用关系矩阵（links）

为每层与其下一层之间定义链接，类型与颜色：

• call 调用 / API 依赖（紫 #8b5cf6）
• data 数据流（蓝 #2563eb）
• realtime 实时数据流（绿 #10b981）
• batch 批量数据流（橙 #f59e0b）

链接格式：{"from":"用户层.Web 管理端","to":"应用层.追溯管理","type":"call"}，from/to 用"层名.模块名"定位。scale_level=企业级 时补充分布式链路（网关→鉴权→服务、读写分离、多活）。

排版约束（必须遵守，避免文字交叠/遮挡）：

1. 层标题永远置于最上层：层背景先绘制，卡片次之，箭头/标签再次，标题保护罩 + 色条 + 标题文字最后绘制；
2. 标题与卡片垂直分离：标题文字位于层带顶部，卡片位于标题下方，避免二者重叠；
3. 标题保护罩：标题区绘制与层背景同色的不透明矩形，覆盖整段标题文本，底部止于卡片上方 2 px，确保穿越该区的箭头被遮挡而文字清晰；
4. 同层链接必须画在卡片下方，不可穿越中间卡片；
5. 同一源出发的多条链路，标签在垂直方向至少错开 22 px；
6. 标签 pill 宽按中文字符 15 px + 28 px 边距计算，最小 56 px；
7. 标签不得与卡片矩形、其他标签或画布边缘重叠；
8. 标签中心对齐水平箭头段，白底 pill 完全覆盖线条。

Step 5 — 生成 4 种交付物

1. 可视化架构图（主交付）：把模型写入 JSON 规格文件 spec.json，调用 python scripts/generate_diagram.py spec.json architecture.html 生成科技风分层 HTML 图（扁平线性图标 + 语义化彩色箭头 + 图例）。
2. Mermaid：graph TD + 每层 subgraph，节点用模块名，边用 -->|type|。
3. ASCII 图：文本分层树，层间用箭头与类型标注。
4. 结构化 JSON：即传给脚本的 spec.json 本身（含 layers / links / tech_selection / rationale）。

交付物存放于当前工作目录（或用户指定目录），并用 present_files 呈现 HTML。

Output Standard（必须满足）

• ✅ 5 层架构完整，每层 2–5 个模块（企业级可到 5，初创可到 2）。
• ✅ 模块间调用关系矩阵（links），覆盖相邻层主链路。
• ✅ 关键技术选型说明（每层 1–2 项）。
• ✅ 架构设计简要理由 3–5 条（rationale），说明分层依据、技术取舍、可扩展性。
• ✅ 可视化图排版质量：层标题文字与色条不被任何箭头遮挡；标签无重叠、无遮挡卡片；同层链接不穿越卡片；文字清晰可读。

Output Format Details

• 可视化图规范与配色见 scripts/generate_diagram.py 文件头注释（卡片 / 箭头 / 图标映射）。
• 标题排版：脚本在绘制完所有箭头与标签后，再绘制标题保护罩、色条与文字；标题保护罩覆盖整段标题文本，底部止于卡片上方 2 px，保证任何箭头穿越标题区时文字仍清晰可读。
• 标签排版：脚本在渲染后执行 bbox 碰撞检测，自动水平/垂直错开重叠标签；标签保护范围扩展至所有卡片（含跨层链路的中间层卡片），确保中文标签 pill 宽度充足、不压线、不压卡片、不越界。
• Mermaid / ASCII / JSON 模板与示例见 references/output-formats.md。
• 组件库与多产品形态推荐见 references/component-library.md。

Example

输入：

产品名称"智链溯源"、类型"SaaS"、目标用户"供应链企业"、核心功能"商品追溯/防伪验证/供应链可视化/预警通知"、技术偏好"阿里云"、规模"企业级"

执行：读取 component-library.md 的 SaaS + 阿里云 + 企业级 推荐 → 用户层(Web/小程序/开放API)、应用层(追溯管理/防伪验证/可视化大屏/预警中心)、服务层(微服务网关/鉴权/业务微服务/消息队列/规则引擎)、数据层(RDS/Redis/Elasticsearch/MaxCompute/OSS)、基础设施层(ACK/SLB/云监控/日志服务) → 生成 spec.json → 运行脚本 → 输出 HTML 图 + Mermaid + ASCII + JSON，并附 4 条设计理由。

References

• references/component-library.md — 多产品形态组件库与技术映射（5.0 场景覆盖）
• references/output-formats.md — Mermaid / ASCII / JSON 模板
• scripts/generate_diagram.py — JSON 规格 → 科技风可视化架构图