evacc - DAG 图可视化工具
用于可视化和分析有向无环图（DAG）。支持节点搜索、高亮、依赖关系分析等功能。
功能特性
1. 图形可视化
- 多种布局方向：支持左→右（LR）、上→下（TB）、右→左（RL）、下→上（BT）四种布局方向
- 自适应渲染：根据图的大小自动优化渲染性能
- 异步加载：大文件异步加载，避免界面卡顿
2. 节点搜索
- 智能搜索：支持按节点 ID 或标签搜索
- 精确匹配优先：优先显示精确匹配的节点，然后是包含匹配
- 自动聚焦：搜索到节点后自动聚焦并显示该节点的 5 层依赖关系
- 搜索方式：
- 在搜索框输入节点名称，点击"搜索"按钮
- 或在搜索框中按
Enter 键
3. 节点交互
左键点击节点
- 高亮显示：点击的节点以紫色高亮显示
- 邻居高亮：相邻节点以蓝色高亮显示
- 依赖聚焦：自动聚焦显示该节点前后 5 层的依赖关系
- 自动缩放：节点显示为正常大小的一半，便于查看
鼠标悬停
- 悬停高亮：鼠标悬停在节点上时，节点以浅紫色高亮
- 工具提示：界面右下角显示节点的详细信息（Metric 和 Metadata），超过2s自动隐藏
- 仅当前节点：悬停时只高亮当前节点，不影响其他节点
右键点击节点
- 上下文菜单：显示父节点和子节点列表
- 快速导航：点击菜单中的节点可快速跳转到对应节点
- 依赖关系：清晰展示节点的上下游关系
点击空白区域
- 清除高亮：点击图的空白区域可清除所有高亮
- 重置视图：恢复所有节点的默认显示状态
4. 节点颜色含义
基础颜色
警告颜色
- 橙红色
#ff5722：NotDump 节点，表示该节点没有数据或数据不完整
- 检测规则：节点的
metric、metadata、label 或 id 中包含 "NotDump"
- 边框加粗显示，更加醒目
异常颜色
- 红色
#ef4444：余弦相似度低于阈值的节点
- 默认阈值：0.99（可在工具栏中调整）
- 当节点的
cos_sim 值小于阈值时，节点显示为红色
- NaN 值不会触发红色标记
高亮颜色
- 紫色
#a855f7：点击选中的节点
- 浅紫色
#c084fc：鼠标悬停的节点
- 蓝色
#3b82f6：选中节点的相邻节点（邻居节点）
聚焦模式
- 淡化处理：在 5 层依赖聚焦模式下，不在依赖范围内的节点会淡化显示（透明度 0.15）
- 保持警告色：NotDump 节点在聚焦模式下仍保持橙红色警告色，不会被覆盖
鼠标悬停在节点上时，会显示详细的节点信息：
标准格式（node_graph_tree.json）
- 节点信息：显示节点 ID 和 Label
- Metric 部分：
- 显示所有指标及其值、描述
- 不显示
dtype 字段
- NaN 值会特殊标记
- Metadata 部分：
友好格式（node_graph_tree_friendly.json）
- 节点信息：显示节点 ID 和
cos_sim 的 value 值
- 如果
metric 为 "NotDump"，则显示 "NotDump"
- Metric 和 Metadata 的显示规则与标准格式相同
6. 阈值设置
- 可配置阈值：工具栏提供阈值输入框，默认值为 0.99
- 实时更新：修改阈值后，节点颜色会根据新的阈值实时更新
- 范围限制：阈值范围 0-1，步长 0.01
- 用途：控制何时将节点标记为红色（余弦相似度异常）
7. 工具栏功能
- 布局方向选择器：切换图的布局方向（LR/TB/RL/BT）
- 搜索框：输入节点名称进行搜索
- 阈值输入框：设置余弦相似度阈值
- 缩放到视图：将整个图缩放到适合窗口大小
- 导出 PNG：将当前图形导出为 PNG 图片
- 拓扑排序：检测图的拓扑排序顺序
- 检测环：检测图中是否存在环（非 DAG）
8. 数据格式支持
标准格式（node_graph_tree.json）
{
"nodes": [
{
"id": "node_id",
"label": "node_label",
"metric": {
"cos_sim": {
"value": 0.99,
"dtype": "float",
"desc": "余弦相似性"
}
},
"metadata": {
"key": "value",
"dtype": "string"
}
}
],
"edges": [
{
"source": "node1",
"target": "node2"
}
]
}
友好格式（node_graph_tree_friendly.json）
{
"nodes": [
{
"id": "node_id",
"friendlyMeta": {
"cos_sim": 0.99
},
"metric": {
"cos_sim": {
"value": 0.99,
"dtype": "float",
"desc": "余弦相似性"
}
},
"metadata": {
"key": "value"
}
}
],
"edges": [
{
"source": "node1",
"target": "node2"
}
]
}
使用方法
安装扩展
- 在 VS Code 中打开扩展市场
- 搜索 "evacc"
- 点击安装
加载图形数据
- 在 VS Code 侧边栏找到 "DAG Graph" 视图
- 点击工具栏的 "+" 按钮添加 JSON 文件
- 选择你的图形数据文件（支持标准格式和友好格式）
- 在文件列表中点击文件名打开图形视图
基本操作
搜索节点：
- 在顶部搜索框输入节点 ID 或标签
- 点击"搜索"按钮或按
Enter 键
- 图形会自动聚焦到匹配的节点
查看节点详情：
- 将鼠标悬停在节点上查看工具提示
- 工具提示显示节点的 Metric 和 Metadata 信息
探索依赖关系：
- 点击节点查看其 5 层依赖关系
- 右键点击节点查看父节点和子节点列表
- 在右键菜单中点击节点名称可快速跳转
调整视图：
- 使用鼠标滚轮缩放图形
- 拖拽图形移动视图
- 点击"缩放到视图"按钮重置视图
清除高亮：
- 点击图形的空白区域清除所有高亮
- 或清空搜索框并搜索
高级功能
调整阈值：
- 在工具栏的阈值输入框中输入新值（0-1 之间）
- 节点颜色会根据新阈值实时更新
切换布局方向：
- 使用布局方向选择器切换图的显示方向
- 适合不同场景的查看需求
导出图形：
分析图形：
- 点击"拓扑排序"查看节点的执行顺序
- 点击"检测环"检查图形是否为有效的 DAG
注意事项
- NotDump 节点：橙红色节点表示数据不完整，需要特别关注
- 红色节点：表示余弦相似度异常，可能需要检查数据质量
- NaN 值：NaN 值不会触发红色标记，但会在工具提示中显示
- 大文件：加载大文件时请耐心等待，系统会自动优化加载过程
| |
