10
Arch Pack · workflow

arch-visual-pack

10-arch-visual-pack.md
🗺️
P2 source: claude-sessions created: 2026-06-13
◉

WHAT IS THIS

定位

一次产出多视角架构图和 HTML 简报。适合复杂系统需要快速对齐数据流、agent 编排、部署、权限、状态机时使用。

⚡

TRIGGERS

触发场景
▸项目涉及多个 agent、runtime、服务、队列、数据库。
▸PRD 或 ADR 难以让人快速理解系统边界。
▸需要给团队、用户或未来 agent 留一份可视化入口。
▸架构图经常过期，想让图从代码和文档提取。
↹

INPUT & OUTPUT

输入 / 产出
↘ INPUT
  • README、CONTEXT、ADR、PRD。
  • 关键源码目录。
  • 部署配置。
  • API route、event、queue、storage。
  • 目标读者和使用场景。
↗ OUTPUT
  • 单文件 HTML 简报。
  • Mermaid 图组。
  • 架构事实表。
  • 风险和未知项。
  • 桌面和移动截图验证。
·

视角

视角
  • 数据流：请求、事件、状态、存储。
  • Agent 编排：谁调谁，哪些工具可用。
  • 部署：Worker、server、client、storage、DNS。
  • 权限：用户、agent、service account、secret。
  • 状态机：draft、pending、approved、completed 等状态。
🪜

STEPS

编排步骤
  1. 1
    事实抽取
    从代码和文档提取组件、边、协议、状态。
  2. 2
    分视角建图
    每个视角单独生成，不把所有东西塞进一张图。
  3. 3
    交叉校验
    图里的节点必须能追到源码或文档证据。
  4. 4
    写 HTML 简报
    包含一行 verdict、结构图、决策矩阵、风险表、下一步。
  5. 5
    渲染验证
    用浏览器打开，检查 Mermaid、布局、移动端、横向溢出。
⚙

AGENT ROLES

Agent 分工
⚙
Facts Agent
提取事实。
⚙
Diagram Agents
每个视角一个 agent。
⚙
Consistency Agent
核对图和代码。
⚙
HTML Agent
生成简报。
⚙
Visual QA Agent
截图检查。
✓

ACCEPTANCE GATE

验收 gate
⊘

FAILURE HANDLING

失败处理
⊘
如果事实来源不足，图上标 unknown，不脑补。
⊘
如果一张图过密，拆视角，不缩小字体硬塞。
⊘
如果目标是 docs site，验证部署后的 Mermaid 和路由。
·

简报结构

简报结构
# Architecture Pack

## Verdict

## System Map

## Data Flow

## Agent Orchestration

## Deployment

## Risks

## Next Move