流程图编辑器
概述
流程图编辑器（NodeGraph）是程序编辑器的图形化视图，以节点和连线的方式展示程序的执行流程。
切换视图
从表格切换
- 右键点击 Job 标签
- 选择 "切换到图"
- 切换到图形视图模式
从图形切换
- 在图形视图中右键空白处
- 选择 "切换到表"
- 返回表格视图
界面元素
┌─────────────────────────────────────────────────────────────┐
│ 工具栏: [选择] [框选] [移动] [缩放] [适应窗口] [布局] │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ │
│ │ LoadImage │ │
│ └──────┬──────┘ │
│ │ │
│ ┌──────▼──────┐ ┌──────────────┐ │
│ │GaussianBlur │───▶│ Threshold │ │
│ └─────────────┘ └──────┬───────┘ │
│ │ │
│ ┌──────▼───────┐ │
│ │FindContours │ │
│ └──────┬───────┘ │
│ │ │
│ ┌────────▼────────┐ │
│ │ Count > 0 ? │ │
│ └──┬──────────┬───┘ │
│ Yes │ │ No │
│ ┌────────▼──┐ ┌──▼──────────┐ │
│ │Job_Success │ │ Job_Fail │ │
│ └────────┬───┘ └──┬──────────┘ │
│ │ │ │
│ └────┬─────┘ │
│ ┌─────▼──────┐ │
│ │ SaveResult │ │
│ └────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 属性面板: 选中节点信息 │ │
│ │ - 算子名: GaussianBlur │ │
│ │ - 输入: Image, 3.0 │ │
│ │ - 输出: BlurImage │ │
│ │ - 耗时: 4ms │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
节点类型
普通算子节点
┌───────────────────────┐
│ 🖼 算子名称 │ ← 顶部：算子图标+名称
├───────────────────────┤
│ 输入: Image, 3.0 │ ← 左侧：输入参数摘要
│ 输出: BlurImage │ ← 右侧：输出变量摘要
├───────────────────────┤
│ ⏱ 4ms ✓ │ ← 底部：耗时+状态
└───────────────────────┘
控制流节点
IF 节点
┌─────────────────────────────────────────────┐
│ ◇ IF (Count > 0) │
├─────────────────────────────────────────────┤
│ ┌─ THEN ─────────────────────────────┐ │
│ │ 算子列表... │ │
│ └────────────────────────────────────┘ │
│ ┌─ ELSE ─────────────────────────────┐ │
│ │ 算子列表... │ │
│ └────────────────────────────────────┘ │
└─────────────────────────────────────────────┘
LOOP 节点
┌─────────────────────────────────────────────┐
│ ↻ LOOP (i=0; i<10; i++) │
├─────────────────────────────────────────────┤
│ ┌─ 循环体 ──────────────────────────┐ │
│ │ 算子列表... │ │
│ └────────────────────────────────────┘ │
└─────────────────────────────────────────────┘
CALL 节点
┌───────────────────────┐
│ ➤ CALL: ProcessJob │
│ ───────────────── │
│ 跳转到子流程执行 │
└───────────────────────┘
起止节点
┌─────────┐ ┌─────────┐
│ ▶ START │ │ ⏹ END │
└─────────┘ └─────────┘
连线类型
数据流连线
─────── 数据流向
表示算子间的数据传递，从输出端口指向输入端口。
控制流连线
─────── 执行顺序
表示算子的执行顺序，从上到下或从左到右。
条件分支连线
───Yes─── 真分支
───No──── 假分支
表示条件判断后的分支路径。
视图操作
缩放
| 操作 | 方式 |
|---|---|
| 放大 | Ctrl + 滚轮上 或 + 键 |
| 缩小 | Ctrl + 滚轮下 或 - 键 |
| 适应窗口 | Ctrl + 0 或工具栏按钮 |
| 实际大小 | Ctrl + 1 |
平移
- 拖拽空白区域：移动视图
- 中键拖拽：平移画布
- 滚动条：拖动滚动条
选择
- 单击节点：选择单个节点
- 框选：按住左键拖选多个节点
- Ctrl + 单击：多选/取消选择
- 全选：
Ctrl + A
节点操作
添加节点
- 从工具栏选择 "添加节点"
- 在画布点击位置放置
- 配置参数
移动节点
- 选中节点
- 拖拽到目标位置
- 连线自动重排
删除节点
- 选中节点
- 按
Delete或Backspace - 确认删除
折叠/展开
- 控制流节点支持折叠
- 点击折叠按钮简化视图
◇ IF (count > 0) ▼ ← 展开状态
◇ IF (count > 0) ► ← 折叠状态
布局工具
自动布局
- 点击工具栏 "布局" 按钮
- 选择布局算法：
- 垂直布局：从上到下排列
- 水平布局：从左到右排列
- 树形布局：层级结构
- 紧凑布局：最小间距
手动调整
- 拖拽节点自由布局
- 调整节点间距
- 对齐节点
节点属性
属性面板
选中节点后，右侧面板显示：
┌─ 属性: GaussianBlur ──────────────────┐
│ │
│ 基本信息 │
│ ├─ 名称: GaussianBlur │
│ ├─ ID: gaussian_blur_001 │
│ └─ 类型: 图像处理 │
│ │
│ 输入参数 │
│ ├─ Image: [InputImage ] │
│ ├─ KernelSize: [3.0 ] │
│ ├─ SigmaX: [0.0 ] │
│ └─ SigmaY: [0.0 ] │
│ │
│ 输出参数 │
│ └─ OutputImage: [BlurImage ] │
│ │
│ 运行信息 │
│ ├─ 耗时: 4ms │
│ ├─ 状态: ✓ 成功 │
│ └─ 上次运行: 2026-07-28 12:00:00 │
│ │
│ [确定] [取消] [重置] │
└────────────────────────────────────────┘
修改属性
- 在属性面板修改参数
- 修改实时同步到表格视图
- 表格和图形视图保持一致
视图同步
表格 → 图形
图形 → 表格
同步规则
- 表格是数据源（Single Source of Truth）
- 图形视图仅为可视化投影
- 所有修改最终同步到表格
- 避免循环更新
高级功能
节点搜索
Ctrl + F打开搜索- 按名称/类型搜索节点
- 搜索结果高亮显示
书签
- 标记常用节点
- 快速跳转到书签
- 支持书签管理
视图快照
- 保存当前视图状态
- 恢复历史快照
- 对比不同时间的程序结构
快捷键汇总
| 功能 | 快捷键 |
|---|---|
| 放大 | + 或 Ctrl++ |
| 缩小 | - 或 Ctrl+- |
| 适应窗口 | Ctrl+0 |
| 实际大小 | Ctrl+1 |
| 全选 | Ctrl+A |
| 删除选中 | Delete |
| 复制 | Ctrl+C |
| 粘贴 | Ctrl+V |
| 撤销 | Ctrl+Z |
| 重做 | Ctrl+Y |
| 搜索节点 | Ctrl+F |
| 切换视图 | Ctrl+Tab |
| 折叠/展开 | Space |
最佳实践
程序结构
- 从左到右或从上到下布局
- 控制流节点保持紧凑
- 交叉连线越少越好
可读性
- 节点间距保持一致
- 使用自动布局整理
- 适当添加注释节点
调试
- 图形视图适合理解整体流程
- 表格视图适合快速编辑参数
- 两个视图配合使用效率最高
复杂程序
- 大型程序建议使用图形视图
- 控制流嵌套时图形视图更清晰
- 切换视图验证结果一致性