科技产品架构图生成器
将一段产品描述，自动转化为可用于方案汇报与技术文档的专业级架构图。
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_name |
✅ | 产品名称 |
product_type |
✅ | 产品类型：SaaS / IoT平台 / 数据平台(数据中台) / AI平台 / 云原生·微服务 / PaaS / 电商·小程序 / 单体应用 |
target_users |
✅ | 目标用户群体描述 |
core_features |
✅ | 核心功能列表，3–8 个 |
tech_preference |
⬜ | 技术偏好：阿里云 / 腾讯云 / AWS / 自研·开源（影响组件命名） |
scale_level |
⬜ | 规模等级：初创 / 中型（默认） / 企业级（影响层数与模块深度） |
若 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 种交付物
- 可视化架构图（主交付）：把模型写入 JSON 规格文件
spec.json，调用
python scripts/generate_diagram.py spec.json architecture.html
生成科技风分层 HTML 图（扁平线性图标 + 语义化彩色箭头 + 图例）。 - Mermaid：
graph TD+ 每层subgraph，节点用模块名，边用-->|type|。 - ASCII 图：文本分层树，层间用箭头与类型标注。
- 结构化 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 规格 → 科技风可视化架构图
