# process-vue3

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

## Basic Information

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

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-11-15
- **Last Updated**: 2025-12-15

## Categories & Tags

**Categories**: Uncategorized

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

## README

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

### process-vue3

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

#### 特性

- 基于 Vue3 和 draw2d_pro，提供高性能的流程图编辑体验
- 支持自定义节点和属性，灵活扩展
- 提供丰富的示例和文档，便于快速集成
- 支持流程属性、节点属性、图形属性配置

#### 安装

```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>
```

#### 示例

点击 [example](https://gitee.com/NBegin/process-vue3/tree/master/example) 查看示例。

#### 开源支持

如果您喜欢这个项目，请在 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) 文件。

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