kg_agent/visualization

可视化工具集

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

📁 文件夹结构

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. 自包含：可以单独复制任何子文件夹到其他位置使用

🚀 使用方式

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

# 方式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. 在主脚本中添加调用逻辑