@xx.md  @yy.md

根據(jù)上面的文檔和整個(gè)項(xiàng)目的代碼，用下面的提示詞幫我生成一個(gè)處理流程的可視化架構(gòu)圖：

# 交互式架構(gòu)圖生成 Prompt

創(chuàng)建一個(gè)專業(yè)的動(dòng)態(tài)架構(gòu)可視化系統(tǒng)。要求：?jiǎn)蜨TML文件，CDN引入，開(kāi)箱即用。

## 核心技術(shù)
使用 React Flow 11 版本，充分利用其所有高級(jí)特性，對(duì)于所有React Flow組件在使用前都進(jìn)行檢查

### 簡(jiǎn)化CDN引用

  - 使用統(tǒng)一的 reactflow 包而不是分散的子包
  - 移除多余的樣式文件引用
  - 確保正確的加載順序

## 關(guān)鍵防錯(cuò)

// ? 這樣寫(xiě)會(huì)報(bào)錯(cuò) "useNodesState is not a function"
const { useNodesState, useEdgesState } = ReactFlow;

// ? 正確寫(xiě)法
const ReactFlowComponent = window.ReactFlow.default || window.ReactFlow.ReactFlow;
const { useNodesState, useEdgesState } = window.ReactFlow;

// ? 去掉默認(rèn)灰色背景
.react-flow__node { background: transparent !important; }

## 功能要求

### 核心功能
const { project, getNodes, getEdges, setNodes, setEdges,
        getZoom, setViewport, fitView, useReactFlow } = window.ReactFlow;

### 節(jié)點(diǎn)系統(tǒng)
- 至少5種不同類型的節(jié)點(diǎn)（輸入、處理、AI、輸出、分組等）
- 節(jié)點(diǎn)要有狀態(tài)指示（ready、processing、completed、error）
- 支持實(shí)時(shí)數(shù)據(jù)更新（進(jìn)度條、指標(biāo)等）
- 響應(yīng)式設(shè)計(jì)：縮放時(shí)顯示不同詳細(xì)程度

### 邊的設(shè)計(jì)
- 動(dòng)畫(huà)邊：表示數(shù)據(jù)流動(dòng)
- 帶指標(biāo)的邊：顯示延遲、帶寬等信息
- 不同顏色：區(qū)分?jǐn)?shù)據(jù)類型
- 路徑動(dòng)畫(huà)：讓人一眼看出流向

### 交互功能
- 右鍵菜單
- 雙擊編輯
- 拖放創(chuàng)建新節(jié)點(diǎn)
- 連線驗(yàn)證
- 鍵盤快捷鍵（S-開(kāi)始 R-重置 H-隱藏面板 空格-適應(yīng)視圖）

### UI組件
- 可折疊控制面板（不要擋住主畫(huà)布）
- 小地圖導(dǎo)航
- 背景網(wǎng)格
- 懸浮操作按鈕

### 視覺(jué)效果
- 漸變色背景
- 毛玻璃效果
- 呼吸燈動(dòng)畫(huà)
- 平滑過(guò)渡

## 讓AI自由發(fā)揮
在滿足上述要求的基礎(chǔ)上，盡情發(fā)揮創(chuàng)意，做出讓人眼前一亮的效果。