该技能用于制作单文件、可直接打开的交互式架构图 HTML，让工作坊参与者、客户或新成员按步骤点击了解系统如何运作：节点之间以动画数据包流动，侧栏显示载荷细节，并支持模式切换（离线/在线、dev/prod、v1/v2）。视觉为深色、教学优先风格，可通过 assets/css-tokens.css 中的 CSS 变量改品牌配色。
核心模型四要素：节点（服务、数据存储、用户、队列、外部系统，含角色配色与元数据）、流程（用户可选场景，如 RAG Query、Ingest、Auth）、步骤（from/to、颜色、标题、路由、载荷、描述、标签，逐步点亮一条连线与目标节点；from 与 to 相同时渲染为节点上方的循环）、模式（正交开关，可隐藏/显示节点、重命名节点、替换载荷与延迟标签）。模式不是替代流程：流程描述场景，模式描述部署形态。
工作流程：先读取用户提供的架构说明文档（如 SOLUTION.md、README、OpenAPI）提取服务、端口、部署模式、端点与内部调用链，再只问缺失信息；随后在纸面规划拓扑以避免连线交叉；接着复制 assets/template.html，仅修改标题、模式按钮、流程标签页、节点 div、JS 中的 flows 对象等指定区域，不要重写 CSS、播放器与 SVG 渲染；生成后自检流程叙事、连线交叉、模式字段完整性；最后输出 architecture.html 与配套 architecture.md 两个文件。可用 node references/screenshot.js 做截图校验，非零退出表示需先修复 HTML。
适用场景：讲解认证流程、设计 RAG 管线、梳理微服务通信、可视化 CI/CD 与 ETL 数据流、绘制智能体工具调用系统等。若只需静态图、序列图或放入幻灯片，更适合使用 Mermaid 而非本技能。
限制：产物是交互式 HTML，不是图片或幻灯片；示例 JSON 是规划规格而非可直接运行代码；载荷应精简，节点角色数量建议不超过 6 个。其他平台保存路径、收费与价格等信息暂未提供。