生成html架构图

概述

HTML 架构图 / 流程图生成器

把用户描述的系统、流程或技术架构，生成一张自包含、零依赖的单文件 HTML（内联 SVG 矢量图），风格统一、可直接在浏览器打开。

When to Use

• 用户要"架构图""流程图""技术架构""系统图""数据流向图""把这个流程可视化"。
• 用户已有文字描述的步骤 / 组件 / 管线，想要「一图胜千言」的可视化。
• 需要交付可分享、可双击打开、不依赖网络的图文（区别于 PPT / Excalidraw / Mermaid 渲染依赖）。

核心做法（务必遵循）

1. 永远是单文件 HTML + 内联 SVG，禁止引用外部 CSS / JS / 字体 / 图片——保证离线可开。
2. 配色与版式严格按 references/style-guide.md，保证同一系列图视觉统一。
3. 从 references/diagram-template.html（纵向 bands）或 references/diagram-template-horizontal.html（横向 stages）复制骨架再改，不要从零写 SVG。

工作流程

1. 抽取架构

若用户只给了一段描述，先拆出四要素：

• 有哪些阶段 / 组件（输入、处理、基座、输出…）；
• 数据 / 控制信号怎么在它们之间流动；
• 有什么约束 / 坑 / 边界（内存、部署、成本、保脸与否…）；
• 是否需要技术栈表 / 步骤列表 / 路线对比等附加栏。

描述含糊时，用 AskUserQuestion 澄清关键项（阶段划分、流向、是否要对比栏），不要瞎编组件或指标。用户已给清结构则直接进入下一步。

2. 选布局

• 顺序管线 / 步骤流 → 纵向 bands（默认，适合内联 widget 预览、窄屏）。
• 层状 / 带并行分支的架构 → 横向 stages（信息更密，需 ~1000px 宽）。

3. 画 SVG

按 style-guide 的色板与约定，复制模板后在 <svg> 内改文字 / 颜色 / 箭头：

• 每个 band：<rect rx="12"> + 浅填充 + 彩色描边。
• 每根箭头旁用小字标注"流动的是什么"（人脸图 / 身份向量 / 像素图 / API 请求…）。
• 长句用 <tspan x=".." dy=".."> 手动折行（SVG 不自动换行）。
• 约束 / 踩坑放进底部 ⚠ band。

4. 包成 HTML 并交付

• 把 SVG 放进 .card；按需加技术栈 <table>、步骤 <ol>、对比 .grid（见模板）。
• 写到当前工作区输出目录（如 ai-portrait-output/ 或工作区根），文件名语义化（如 xxx_architecture.html）。
• 用 present_files 打开浏览器预览；视觉类任务可再用 show_widget 内联一版 SVG 供即时查看。

Resources

• references/style-guide.md — 配色板、版式、SVG 约定、Do/Don't（必读）。
• references/diagram-template.html — 纵向 bands 布局模板（复制即用，含技术栈/步骤/对比区块）。
• references/diagram-template-horizontal.html — 横向 stages 布局模板（适合层状 / 并行架构）。

关键约束

• 离线可开：禁止外链字体 / CDN / 图片。
• band 内文字不溢出边框；单个 band 正文 ≤4 行，多了就拆子项或加 band。
• 交付前自检：箭头方向对不对、每根箭头有没有标签、配色是否落在 style-guide 色板内。
• 深色主题按需（见 style-guide 末尾），默认浅色。