# process-vue3

**Repository Path**: NBegin/process-vue3

## Basic Information

- **Project Name**: process-vue3
- **Description**: 工作流，审批流，流程编排，流程设计，flow，workflow，process，process-vue3
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-11-15
- **Last Updated**: 2026-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, vue3, process, JavaScript, HTML

## README

## 《在混沌中寻找清醒，于深渊中仰望星空》

### process-vue3

process-vue3 是一款基于 Vue3 和 draw2d_native 的流程编排工具，可以帮助开发者快速构建流程图编辑器，适用于工作流引擎、业务流程管理等场景。

## 大厂流程编排设计方案深度分析与对比

### 1. 主流大厂流程编排方案概述

#### 1.1 阿里巴巴 CompileFlow

- **核心设计理念**：编译执行的高性能流程编排引擎
- **技术架构**：基于DAG（有向无环图）数据结构，将流程定义转换为优化的Java代码，动态编译为字节码直接执行
- **性能特点**：原生Java级别的极致性能，无解释器开销
- **适用场景**：高性能、高并发的业务流程场景
- **核心优势**：编译执行、轻量级、易扩展

#### 1.2 字节跳动 FlowGram

- **核心设计理念**：AI时代的可视化工作流引擎
- **技术架构**：面向AI Bot开发的可视化流程编排，支持多模态输入输出
- **性能特点**：图形化设计、低代码开发、快速集成
- **适用场景**：AI Bot开发、自动化流程、智能服务编排
- **核心优势**：可视化设计、AI能力集成、易用性强

#### 1.3 传统工作流引擎对比（Activiti/Flowable）

- **核心设计理念**：基于BPMN 2.0标准的完整工作流解决方案
- **技术架构**：重量级架构，包含流程引擎、任务引擎、历史引擎等多个组件
- **性能特点**：功能全面但性能相对较低
- **适用场景**：复杂业务流程、审批流、企业级BPM系统
- **核心优势**：标准兼容、功能全面、成熟稳定

### 2. process-vue3 架构设计

#### 2.1 核心架构

```
┌─────────────────────────────────────────────────────────┐
│                     ProcessEditor                       │
├─────────────────┬─────────────────┬─────────────────────┤
│   Vue3 组件     │  draw2d_native  │   流程配置系统       │
│   （视图层）     │  （渲染引擎）    │   （业务层）         │
├─────────────────┼─────────────────┼─────────────────────┤
│ - 响应式状态    │ - 图形渲染       │ - 节点管理          │
│ - 组件通信      │ - 事件处理       │ - 属性配置          │
│ - 生命周期管理  │ - 画布操作       │ - 流程导入导出      │
└─────────────────┴─────────────────┴─────────────────────┘
          │                │                 │
          └────────────────┼─────────────────┘
                           ▼
                ┌───────────────────┐
                │   核心设计器       │
                │  ProcessDesigner  │
                └───────────────────┘
                           │
                           ▼
                ┌───────────────────┐
                │   生命周期管理     │
                │   LIFE_CYCLE_EVENTS│
                └───────────────────┘
```

#### 2.2 技术栈

| 技术/框架      | 版本 | 用途           |
| -------------- | ---- | -------------- |
| Vue            | 3.x  | 前端框架       |
| TypeScript     | 4.x+ | 类型系统       |
| draw2d_native  | 1.x  | 流程图渲染引擎 |
| ant-design-vue | 3.x  | UI组件库       |
| less           | 4.x  | CSS预处理器    |
| lodash-es      | 4.x+ | 工具函数库     |

#### 2.3 核心功能模块

| 模块名       | 主要功能               | 文件位置                           |
| ------------ | ---------------------- | ---------------------------------- |
| 流程编辑器   | 可视化流程设计界面     | packages/editor/process-editor.vue |
| 核心设计器   | 流程业务逻辑处理       | packages/core/designer.js          |
| 画布渲染     | 流程图图形渲染         | packages/core/canvas.js            |
| 属性配置面板 | 节点和流程属性配置     | packages/propertyPane/             |
| 原子字段组件 | 表单字段组件集合       | packages/atomicField/              |
| 自定义节点   | 支持扩展自定义节点类型 | packages/types/                    |
| 多语言支持   | 国际化处理             | packages/locales/                  |

### 3. 功能特性对比

| 特性维度   | process-vue3     | CompileFlow    | FlowGram   | Activiti/Flowable |
| ---------- | ---------------- | -------------- | ---------- | ----------------- |
| 技术栈     | Vue3 + draw2d    | Java           | 未知       | Java              |
| 设计模式   | 可视化拖拽设计   | 代码/DSL定义   | 可视化设计 | 可视化设计        |
| 执行方式   | 前端渲染         | 编译执行       | 解释执行   | 解释执行          |
| BPMN支持   | 部分支持         | 不支持         | 不支持     | 完全支持          |
| 性能表现   | 前端渲染性能     | 极高           | 中高       | 中等              |
| 扩展性     | 高（组件化设计） | 高             | 中         | 高                |
| 易用性     | 高               | 中（需编程）   | 高         | 中（配置复杂）    |
| AI能力集成 | 无               | 无             | 强         | 无                |
| 适用场景   | 前端流程设计     | 后端高并发流程 | AI Bot开发 | 企业级BPM系统     |

### 4. 优势与不足分析

#### 4.1 process-vue3 优势

1. **基于Vue3技术栈**：利用Vue3的响应式系统和组件化设计，提供现代化的开发体验
2. **轻量级架构**：核心功能聚焦，易于集成和扩展
3. **可视化设计**：直观的拖拽式设计，降低开发门槛
4. **自定义扩展性强**：支持自定义节点、自定义属性、自定义字段
5. **前后端分离**：前端专注于流程设计，后端专注于流程执行

#### 4.2 process-vue3 不足

1. **BPMN标准支持不完整**：目前仅支持部分BPMN节点类型
2. **缺乏后端执行引擎**：主要聚焦于前端设计，需配合后端引擎使用
3. **AI能力集成不足**：尚未集成AI相关能力

### 5. 未来发展方向

1. **完善BPMN标准支持**：逐步实现完整的BPMN 2.0标准支持
2. **AI能力集成**：引入AI辅助设计、智能推荐等功能
3. **前后端一体化**：提供完整的流程设计-执行解决方案

## 快速开始

### 安装

```bash
yarn install
```

### 使用

```bash
yarn add process-vue3
```

在 `main.ts` 中引入：

```ts
import { createApp } from 'vue';
import App from './App.vue';
import ProcessEditor from 'process-vue3';
import 'process-vue3/lib/assets/main.css';

const app = createApp(App);
app.use(ProcessEditor);
app.mount('#app');
```

在 `App.vue` 中使用：

```vue
<template>
  <ProcessEditor
    ref="editor"
    class="process-vue3"
    :processData="processData"
    :tabConfig="null"
    :customNodes="customNodes"
    :customFields="customFields"
    :staticDataSource="staticDataSource"
  />
</template>
```

## 核心功能

### 1. 可视化流程设计

- 拖拽式节点添加和连接
- 直观的流程画布操作
- 支持节点复制、粘贴、删除
- 支持画布缩放和平移

### 2. BPMN节点支持

| 节点类型 | 描述                 |
| -------- | -------------------- |
| 开始事件 | 流程的起始点         |
| 结束事件 | 流程的结束点         |
| 中间事件 | 流程中的中间触发事件 |
| 用户任务 | 需要人工处理的任务   |
| 服务任务 | 自动执行的服务调用   |
| 脚本任务 | 执行脚本逻辑         |
| 网关节点 | 流程分支和合并       |
| 数据对象 | 流程中的数据存储     |

### 3. 自定义扩展

- **自定义节点**：支持添加自定义业务节点
- **自定义属性**：支持扩展节点属性配置
- **自定义字段**：支持自定义表单字段类型
- **自定义样式**：支持节点样式自定义

### 4. 流程管理

- **流程导入**：支持从JSON数据导入流程
- **流程导出**：支持将流程导出为JSON数据
- **流程验证**：基本的流程合法性检查
- **版本管理**：支持流程版本控制

### 5. 多语言支持

- 内置中英文支持
- 支持自定义语言扩展
- 动态语言切换

## 示例

### 在线演示

[在线演示地址](https://process-vue3.pages.dev/#/) - 展示process-vue3的核心功能和使用方式

### 示例分类

process-vue3提供了丰富的示例，涵盖了不同的使用场景和功能点：

| 示例编号 | 示例名称       | 主要功能                                         | 文件路径                       |
| -------- | -------------- | ------------------------------------------------ | ------------------------------ |
| 0        | 基础流程设计器 | 完整的流程设计器功能，支持自定义节点、属性配置等 | example/src/views/demos/d0.vue |
| 1        | 自定义节点示例 | 展示如何创建和使用自定义HTML节点                 | example/src/views/demos/d1.vue |
| 2        | 数据可视化节点 | 集成DataV组件的自定义节点示例                    | example/src/views/demos/d2.vue |
| 3        | 复杂流程示例   | 展示复杂业务流程的设计和配置                     | example/src/views/demos/d3.vue |
| 4        | 多语言支持示例 | 演示流程编辑器的多语言切换功能                   | example/src/views/demos/d4.vue |
| 5        | 高级属性配置   | 展示复杂节点属性的配置方式                       | example/src/views/demos/d5.vue |
| 6        | 流程导入导出   | 演示流程数据的导入和导出功能                     | example/src/views/demos/d6.vue |
| 7        | 生命周期钩子   | 展示如何使用生命周期钩子扩展功能                 | example/src/views/demos/d7.vue |
| 8        | 自定义工具栏   | 演示如何自定义流程编辑器的工具栏                 | example/src/views/demos/d8.vue |

### 示例效果展示

#### 流程属性配置

![流程属性](example/public/imgs/image-0-m.png)

#### 节点属性配置

![节点属性](example/public/imgs/image-1-n.png)

#### 自定义节点/属性

![自定义节点](example/public/imgs/image-2-n.png)

#### 图形属性配置

![图形属性](example/public/imgs/image-3-n.png)

## 扩展场景

### 1. 自定义节点开发

process-vue3支持灵活的自定义节点扩展，您可以根据业务需求创建各种类型的节点：

#### HTML自定义节点示例

```vue
<template>
  <div class="custom-html-node">
    <h3>{{ title }}</h3>
    <div class="content">{{ content }}</div>
  </div>
</template>

<script setup>
const props = defineProps({
  userData: {
    type: Object,
    default: () => ({}),
  },
  figure: {
    type: Object,
    default: null,
  },
});

const title = computed(() => props.userData?.title || '自定义节点');
const content = computed(() => props.userData?.content || '这是一个HTML自定义节点');
</script>

<style scoped>
.custom-html-node {
  padding: 10px;
  border: 2px solid #409eff;
  border-radius: 8px;
  background-color: #fff;
  min-width: 150px;
  min-height: 80px;
}

.custom-html-node h3 {
  margin: 0 0 5px 0;
  color: #409eff;
  font-size: 14px;
}
</style>
```

#### 注册自定义节点

```javascript
const customNodes = computed(() => [
  {
    type: 'HtmlTask',
    bpmnType: 'CustomHtmlTask',
    text: 'HTML自定义节点',
    component: CustomHtmlNode,
    attr: {
      width: 200,
      height: 80,
      resizable: true,
    },
  },
]);
```

### 2. 自定义属性字段

process-vue3支持扩展自定义属性字段，以满足特定的业务需求：

```javascript
const customFields = computed(() => ({
  SWITCH: {
    component: FieldSwitch,
    props: {},
    events: {},
  },
  COLOR_PICKER: {
    component: ColorPicker,
    props: {
      showText: true,
    },
    events: {
      change: (value) => console.log('Color changed:', value),
    },
  },
}));
```

### 3. 生命周期钩子扩展

process-vue3提供了丰富的生命周期钩子，可以在流程设计的各个阶段进行扩展：

```javascript
// 注册生命周期钩子
const registerHooks = () => {
  // 初始化后钩子
  editor.value.designer.on(
    'afterInit',
    () => {
      console.log('流程编辑器初始化完成');
    },
    { blockAble: true }
  );

  // 节点添加前钩子
  editor.value.designer.on(
    'beforeAddNode',
    ({ emitter, event }) => {
      // 可以在这里进行节点添加前的验证和处理
      return true; // 返回false可以阻止节点添加
    },
    { blockAble: true }
  );

  // 节点删除前钩子
  editor.value.designer.on(
    'beforeRemoveNode',
    ({ event: { figure } }) => {
      if (figure.bpmnType === 'StartEvent') {
        message.warning('开始节点不允许删除');
        return false; // 阻止删除开始节点
      }
      return true;
    },
    { blockAble: true }
  );

  // 节点选择钩子
  editor.value.designer.on('selectedNode', ({ figure }) => {
    console.log('选中节点:', figure.id);
  });
};
```

### 4. 自定义工具栏

您可以根据业务需求自定义流程编辑器的工具栏：

```javascript
const toolbarButtons = {
  getDefaultButtons() {
    return [
      {
        key: 'save',
        text: '保存',
        icon: 'save',
        onClick: () => saveProcess(),
      },
      {
        key: 'export',
        text: '导出',
        icon: 'export',
        onClick: () => exportProcess(),
      },
      {
        key: 'import',
        text: '导入',
        icon: 'import',
        onClick: () => importProcess(),
      },
      {
        key: 'zoomIn',
        text: '放大',
        icon: 'zoom-in',
        onClick: () => zoomIn(),
      },
      {
        key: 'zoomOut',
        text: '缩小',
        icon: 'zoom-out',
        onClick: () => zoomOut(),
      },
    ];
  },
};
```

### 5. 多语言扩展

process-vue3支持多语言扩展，您可以添加自定义语言包：

```javascript
// 自定义语言包
const customLang = {
  'process.common.StartEvent': '开始事件',
  'process.common.EndEvent': '结束事件',
  'process.common.UserTask': '用户任务',
  'process.common.ServiceTask': '服务任务',
  // 更多自定义翻译...
};

// 注册自定义语言
app.config.globalProperties.$getLangText = (key, defaultText) => {
  return customLang[key] || defaultText || key;
};
```

### 6. 流程验证扩展

您可以扩展流程验证功能，确保设计的流程符合业务规则：

```javascript
const validateProcess = () => {
  const processData = editor.value.exportProcess();
  const errors = [];

  // 检查是否有开始节点
  const hasStartNode = processData.figures.some((node) => node.bpmnType === 'StartEvent');
  if (!hasStartNode) {
    errors.push('流程必须包含开始节点');
  }

  // 检查是否有结束节点
  const hasEndNode = processData.figures.some((node) => node.bpmnType === 'EndEvent');
  if (!hasEndNode) {
    errors.push('流程必须包含结束节点');
  }

  // 检查每个节点是否都有连接
  processData.figures.forEach((node) => {
    if (node.bpmnType !== 'StartEvent' && node.bpmnType !== 'EndEvent') {
      const hasIncoming = processData.lines.some((line) => line.target === node.id);
      const hasOutgoing = processData.lines.some((line) => line.source === node.id);

      if (!hasIncoming) {
        errors.push(`节点 ${node.config.name} 没有入连接`);
      }

      if (!hasOutgoing) {
        errors.push(`节点 ${node.config.name} 没有出连接`);
      }
    }
  });

  return errors;
};
```

### 7. 与后端集成

process-vue3可以轻松与后端服务集成，实现流程的持久化和执行：

```javascript
// 保存流程到后端
const saveProcess = async () => {
  const processData = editor.value.exportProcess();
  try {
    const response = await axios.post('/api/process/save', {
      processData,
      processName: '自定义流程',
      processDesc: '这是一个使用process-vue3设计的流程',
    });
    message.success('流程保存成功');
    return response.data;
  } catch (error) {
    message.error('流程保存失败: ' + error.message);
    throw error;
  }
};

// 从后端加载流程
const loadProcess = async (processId) => {
  try {
    const response = await axios.get(`/api/process/${processId}`);
    editor.value.importProcess(response.data.processData);
    message.success('流程加载成功');
  } catch (error) {
    message.error('流程加载失败: ' + error.message);
    throw error;
  }
};
```

## 最佳实践

### 1. 节点设计原则

- **单一职责**：每个节点只负责一个特定的业务功能
- **可复用性**：设计通用的节点类型，便于在不同流程中复用
- **可配置性**：提供丰富的配置选项，适应不同的业务场景
- **可视化友好**：节点的外观应直观反映其功能和状态

### 2. 流程设计建议

- **清晰的流程结构**：使用网关合理组织流程分支和合并
- **完整的生命周期**：确保流程有明确的开始和结束节点
- **适当的节点粒度**：节点的粒度应适中，既不过于细化也不过于粗糙
- **良好的命名规范**：为节点和流程提供清晰、有意义的名称

### 3. 性能优化

- **合理使用自定义节点**：避免过度复杂的自定义节点，影响渲染性能
- **优化流程规模**：对于大型流程，考虑分页或分层设计
- **减少不必要的计算**：在自定义节点中避免频繁的重计算
- **合理使用缓存**：对于不经常变化的数据，使用缓存提高性能

### 4. 扩展性设计

- **使用生命周期钩子**：通过生命周期钩子扩展功能，避免修改核心代码
- **模块化设计**：将自定义功能封装为独立的模块，便于维护和升级
- **遵循开放封闭原则**：对扩展开放，对修改封闭
- **提供清晰的扩展文档**：为其他开发者提供详细的扩展指南

## 常见问题解答

### Q: 如何添加自定义节点？

A: 您可以通过创建Vue组件，并将其注册为自定义节点来添加新的节点类型。具体步骤如下：

1. 创建自定义节点组件
2. 在编辑器中注册自定义节点
3. 配置节点的属性和行为

### Q: 如何扩展节点属性？

A: 您可以通过自定义属性字段和属性配置面板来扩展节点属性。具体方法包括：

1. 创建自定义属性字段组件
2. 在属性配置中引用自定义字段
3. 配置字段的验证规则和默认值

### Q: 如何实现流程的导入导出？

A: process-vue3提供了内置的导入导出功能，您可以直接调用编辑器的方法：

```javascript
// 导出流程
const processData = editor.value.exportProcess();

// 导入流程
editor.value.importProcess(processData);
```

### Q: 如何实现多语言支持？

A: 您可以通过注册自定义翻译函数来实现多语言支持：

```javascript
app.config.globalProperties.$getLangText = (key, defaultText) => {
  return langMap[key] || defaultText || key;
};
```

### Q: 如何与后端工作流引擎集成？

A: 您可以通过以下步骤与后端工作流引擎集成：

1. 使用exportProcess()导出流程数据
2. 将流程数据转换为后端引擎支持的格式
3. 调用后端API保存流程
4. 从后端加载流程数据，使用importProcess()导入

### Q: 如何自定义节点的外观？

A: 您可以通过以下方式自定义节点外观：

1. 在节点注册时配置attr属性
2. 使用CSS样式自定义节点外观
3. 在自定义节点组件中实现复杂的视觉效果
4. 利用图形属性配置面板动态调整节点样式

## 开源支持

如果您喜欢这个项目，请在 Gitee 上给我们一个 Star ⭐️！

## 打赏&支持

<div >
  <img src="packages/assets/images/support.png" 
       alt="支付宝赞助" width="260">
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <img src="packages/assets/images/vx_support.png" 
       alt="微信赞助" width="303" />
</div>

## 协议

本项目使用 Apache-2.0 协议。详情请参阅 [LICENSE](LICENSE) 文件。

##### --- 神即道，道法自然，如来 ---