流程编辑器

基于 @antv/x6 的流程图编辑器，支持节点拖拽、连线、属性编辑和 JSON 导入导出。

功能特性

• ✅ 三栏布局：左侧节点面板、中间编辑器、右侧属性面板
• ✅ 可配置节点：通过 node-config.json 自定义节点
• ✅ 节点拖拽：从左侧面板拖拽节点到编辑器
• ✅ 连线功能：支持节点之间的连线
• ✅ 属性编辑：右侧面板可编辑选中节点和边的属性
• ✅ JSON 导入/导出：支持流程图的保存和加载
• ✅ 工具栏按钮：所有快捷键功能都有对应的工具栏按钮
• ✅ 对齐功能：支持节点垂直居中对齐和水平居中对齐
• ✅ 快捷键支持：复制、粘贴、撤销、重做等
• ✅ 自动ID生成：节点和边自动生成符合规范的ID

安装

npm install

运行

npm run dev

项目结构

flow-editor/
├── src/
│   ├── main.ts                    # 入口文件
│   ├── FlowEditor.ts              # 主编辑器类
│   ├── PropertyPanel.ts           # 属性面板组件
│   ├── node-config.json           # 节点配置文件
│   ├── style.css                  # 样式文件
│   ├── types.ts                   # 类型定义
│   └── utils/
│       ├── GraphInitializer.ts    # 图形初始化器
│       ├── NodeRegistry.ts         # 节点注册器
│       ├── StencilManager.ts      # 节点面板管理器
│       ├── EventHandler.ts        # 事件处理器
│       ├── KeyboardHandler.ts     # 键盘快捷键处理器
│       ├── ToolbarManager.ts      # 工具栏管理器
│       ├── JsonConverter.ts       # JSON 转换器
│       ├── LayoutCalculator.ts    # 布局计算器
│       └── IdGenerator.ts         # ID 生成器
├── index.html                     # HTML 模板
├── package.json
├── tsconfig.json
└── vite.config.ts

自定义节点配置

编辑 src/node-config.json 文件来自定义节点：

{
  "groups": [
    {
      "title": "基础流程图",
      "name": "group1",
      "nodes": [
        {
          "shape": "custom-rect",
          "label": "开始",
          "attrs": {
            "body": {
              "rx": 20,
              "ry": 26
            }
          }
        }
      ]
    }
  ]
}

支持的节点类型：

• startEvent: 开始事件（圆形，绿色）
• userTask: 用户任务（圆角矩形，蓝色）
• exclusiveGateway: 排他网关（菱形，橙色）
• parallelGateway: 并行网关（菱形，紫色）
• endEvent: 结束事件（圆形，红色）

工具栏功能

工具栏提供了所有常用功能的快捷按钮：

文件操作

• 导入：导入 JSON 格式的流程图
• 导出：导出当前流程图为 JSON 格式

对齐功能

• 垂直居中对齐：将选中的多个节点按中心点垂直对齐
• 水平居中对齐：将选中的多个节点按中心点水平对齐

注意：对齐功能需要至少选中 2 个节点，以第一个选中节点为基准进行对齐。

编辑操作

• 复制：复制选中的节点和边
• 剪切：剪切选中的节点和边
• 粘贴：粘贴剪贴板中的内容
• 撤销：撤销上一步操作
• 重做：重做被撤销的操作
• 全选：选中画布中的所有节点
• 删除：删除选中的节点和边

视图操作

• 放大：放大画布视图
• 缩小：缩小画布视图

快捷键

所有工具栏功能都支持快捷键操作：

• Ctrl/Cmd + C: 复制
• Ctrl/Cmd + X: 剪切
• Ctrl/Cmd + V: 粘贴
• Ctrl/Cmd + Z: 撤销
• Ctrl/Cmd + Shift + Z: 重做
• Ctrl/Cmd + A: 全选
• Delete / Backspace: 删除选中元素
• Ctrl/Cmd + 1: 放大
• Ctrl/Cmd + 2: 缩小

ID 生成规则

系统使用 NanoID 自动为节点、边和端口生成唯一ID，格式为 Prefix_nanoid：

节点 ID

• 用户任务：UT_V1StGXR8, UT_Z5vQx9K2, ...
• 网关（排他网关/并行网关）：GW_V1StGXR8, GW_Z5vQx9K2, ...
• 开始事件：ST_V1StGXR8, ST_Z5vQx9K2, ...
• 结束事件：EN_V1StGXR8, EN_Z5vQx9K2, ...
• 其他节点类型：使用类型名前两个字母作为前缀

边 ID

• 边：FLOW_V1StGXR8, FLOW_Z5vQx9K2, ...

端口 ID

• 端口：P_V1StGXR8, P_Z5vQx9K2, ...

ID 生成特点

• 使用 NanoID 生成唯一ID，默认长度为 7 个字符
• NanoID 使用 URL 安全的字符集（大小写字母、数字、连字符、下划线），碰撞概率极低
• 每个 ID 都是全局唯一的，系统会自动检查并避免冲突
• 前缀保持不变（UT_, GW_, FLOW_, P_ 等），便于识别元素类型
• 导入 JSON 时会保留原有的 ID，新创建的元素会按照规则生成新的唯一 ID
• 如果导入的元素缺少 ID，系统会自动为其生成唯一 ID

JSON 格式

导入和导出使用流程定义 JSON 格式，包含：

• processKey: 流程标识（必填，只能包含大小写字母、数字和下划线）
• name: 流程名称（必填）
• version: 版本号（可选）
• nodes: 节点列表
• edges: 边列表

节点属性

用户任务 (userTask)

• id: 节点ID（建议使用 UT_ 前缀）
• type: 节点类型（固定为 userTask）
• name: 节点名称
• x, y: 节点位置（可选）
• properties: 节点属性
  • multiInstanceType: 任务类型（none | sequential | parallel | or）
  • isStartNode: 是否为发起人节点（布尔值）

网关 (exclusiveGateway / parallelGateway)

• id: 节点ID（建议使用 GW_ 前缀）
• type: 节点类型（exclusiveGateway 或 parallelGateway）
• name: 节点名称
• x, y: 节点位置（可选）
• properties: 节点属性
  • defaultFlow: 默认流向（仅排他网关）

事件节点 (startEvent / endEvent)

• id: 节点ID
• type: 节点类型（startEvent 或 endEvent）
• name: 节点名称
• x, y: 节点位置（可选）

边属性

• id: 边ID（建议使用 FLOW_ 前缀）
• from: 源节点ID
• to: 目标节点ID
• name: 边名称（可选）
• condition: 条件表达式（可选，用于排他网关的条件分支）

示例

{
  "processKey": "leave",
  "name": "请假审批流程",
  "version": 1,
  "nodes": [
    {
      "id": "ST_0000000001",
      "type": "startEvent",
      "name": "开始",
      "x": 100,
      "y": 100
    },
    {
      "id": "UT_V1StGXR8",
      "type": "userTask",
      "name": "提交请假",
      "x": 250,
      "y": 100,
      "properties": {
        "multiInstanceType": "none",
        "isStartNode": true
      }
    },
    {
      "id": "GW_Z5vQx9K2",
      "type": "exclusiveGateway",
      "name": "判断天数",
      "x": 400,
      "y": 100,
      "properties": {
        "defaultFlow": "FLOW_V1StGXR8"
      }
    },
    {
      "id": "UT_Z5vQx9K2",
      "type": "userTask",
      "name": "部门审批",
      "x": 550,
      "y": 50,
      "properties": {
        "multiInstanceType": "sequential"
      }
    },
    {
      "id": "EN_V1StGXR8",
      "type": "endEvent",
      "name": "结束",
      "x": 700,
      "y": 100
    }
  ],
  "edges": [
    {
      "id": "FLOW_V1StGXR8",
      "from": "ST_V1StGXR8",
      "to": "UT_V1StGXR8"
    },
    {
      "id": "FLOW_Z5vQx9K2",
      "from": "UT_V1StGXR8",
      "to": "GW_Z5vQx9K2"
    },
    {
      "id": "FLOW_V1StGXR9",
      "from": "GW_Z5vQx9K2",
      "to": "UT_Z5vQx9K2",
      "name": "天数 > 3",
      "condition": "${leaveDays > 3}"
    },
    {
      "id": "FLOW_Z5vQx9K3",
      "from": "UT_Z5vQx9K2",
      "to": "EN_V1StGXR8"
    }
  ]
}

开发

# 开发模式
npm run dev

# 构建
npm run build

# 预览构建结果
npm run preview