# 可视化工具集

这个文件夹包含所有脚本的可视化工具。每个子文件夹对应一个主脚本，包含独立的可视化实现。

## 📁 文件夹结构

```
visualization/
├── sug_v6_1_2_5/          # sug_v6_1_2_5.py 的可视化工具
│   ├── index.js           # 统一的入口文件
│   ├── node_modules/      # 独立的依赖包
│   └── README.md          # 详细使用说明
├── (其他脚本的可视化工具)/
└── README.md              # 本文件
```

## 🎯 设计原则

1. **目录对应**：每个子文件夹名称与主脚本名称对应
   - `sug_v6_1_2_5.py` → `visualization/sug_v6_1_2_5/`

2. **统一命名**：所有可视化工具的入口文件统一命名为 `index.js`

3. **独立依赖**：每个子文件夹包含自己的 `node_modules`，不依赖外部资源

4. **自包含**：可以单独复制任何子文件夹到其他位置使用

## 🚀 使用方式

每个子文件夹都可以独立使用：

```bash
# 方式1：通过主脚本调用
python sug_v6_1_2_5.py --visualize-only "path/to/query_graph.json"

# 方式2：直接调用可视化工具
node visualization/sug_v6_1_2_5/index.js "path/to/query_graph.json" "output.html"
```

## 📦 技术栈

- Node.js
- esbuild（打包）
- React + React DOM
- @xyflow/react（流程图）
- dagre（布局算法）

## 💡 添加新的可视化工具

如果需要为其他脚本添加可视化工具：

1. 创建对应的子文件夹：`visualization/script_name/`
2. 添加 `index.js` 作为入口文件
3. 复制必要的 `node_modules` 依赖
4. 添加 `README.md` 说明文档
5. 在主脚本中添加调用逻辑