# AntFlow-Designer

**Repository Path**: ldhnet/AntFlow-Designer

## Basic Information

- **Project Name**: AntFlow-Designer
- **Description**: 基于 vue3 + elementPlus 的流程设计器+低代码表单，企业级工作流平台，实现可视化的流程配置,极大降低审批流程设计门槛，自定义审批节点，自定义审批条件,必填参数校验等等。满足99.8%以上的审批流程需求。后端使用spring boot,mybatis等主流技术基于activiti深度定制,架构稳定。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: http://antflow.top/ant-flow/dist/
- **GVP Project**: No

## Statistics

- **Stars**: 526
- **Forks**: 187
- **Created**: 2022-06-29
- **Last Updated**: 2025-07-24

## Categories & Tags

**Categories**: lowcode

**Tags**: flowable, activiti, vue3, vite, Pinia

## README

<p align="center" style="margin-bottom: 0 !important">
	<img alt="logo" src="https://gitee.com/ldhnet/ant-flow/raw/master/public/images/logo.png"   width = 15%;>
</p>  

## 基于Vue3 + ElementPlus的独立流程设计器

- [![star](https://gitee.com/ldhnet/Antflow-Designer/badge/star.svg?theme=dark)](https://gitee.com/ldhnet/Antflow-Designer/stargazers)  [![fork](https://gitee.com/ldhnet/Antflow-Designer/badge/fork.svg?theme=dark)](https://gitee.com/ldhnet/Antflow-Designer/members)

-  成品案例  [预览入口](http://14.103.207.27/admin/)
-  独立流程设计器 [预览入口](http://14.103.207.27/ant-flow/dist/) 
-  项目文档 [wiki入口](https://gitee.com/ldhnet/Antflow-Designer/wikis) 
-  流程设计器地址 [Gitee仓库](https://gitee.com/ldhnet/Antflow-Designer) | [GitHub仓库](https://github.com/ldhnet/Antflow-Designer) | [GitCode仓库](https://gitcode.com/ldhnet/Antflow-Designer/overview) 
-  Antflow项目地址 [Gitee仓库](https://gitee.com/tylerzhou/Antflow) | [Github仓库](https://github.com/mrtylerzhou/Antflow) | [GitCode仓库](https://gitcode.com/zypqqgc/Antflow/overview) 
 
- QQ技术交流群（972107977） 期待您的加入
- 有疑问/建议可以Issues留言，我们会认真对待  [issues地址](https://gitee.com/ldhnet/Antflow-Designer/issues)


## 项目介绍
- UI钉钉风格
- 技术点<br />
 1、组件自调用+递归处理，按树状结局处理审批流程问题<br />
 2、接入 VForm3 低代码表单实现【零】编码发起工作流<br />
 3、本项目流程设计器，方便集成到现有项目中或者二次开发<br /> 
- 流程设计器<br />
  1、节点操作：流程节点（添加、修改、删除)。<br />
  2、节点设置：包括审批人、发起人、抄送人、条件设置。<br />
  3、条件节点：选择条件类型，自定义配置条件判断值。<br />
  4、审批节点：选择需要审批的人员、角色、或部门。<br />
  5、抄送节点：选择抄送到的人员、角色、或部门。<br />
  6、错误校验: 对流程节点参数的校验。<br />
  7、流程发布: 当前配置流程提交到Api接口。<br /> 

## 演示图 

![](./public/images/10.png)
![](./public/images/11.png)
![](./public/images/12.png)  
  
-------------------   
## 项目源码

| 项目 | Gitee   | Github    | GitCode|
| ---- | ----| ---- | ---- |
| 设计器 | [Antflow-Designer](https://gitee.com/ldhnet/Antflow-Designer) | [Antflow-Designer](https://github.com/ldhnet/Antflow-Designer) | [Antflow-Designer](https://gitcode.com/ldhnet/FlowDesigner/overview) | 
| 成品项目 | [Antflow](https://gitee.com/tylerzhou/Antflow) | [Antflow](https://github.com/mrtylerzhou/Antflow) | [Antflow](https://gitcode.com/zypqqgc/Antflow/overview) |

#### 项目运行 node14.20.1 以上版本
> 1.下载项目 git clone https://gitee.com/ldhnet/Antflow-Designer.git

> 2.环境依赖  `npm  install --registry=https://registry.npmmirror.com`

> 3.本地运行 `npm run dev` 

> 4.打包运行 `npm run build` 


##  捐赠支持
😀 你可以请作者喝杯咖啡表示鼓励

- 有捐赠的小伙伴（金额不限）可以联系作者领取一份 **独家提升开发技能的文档** 
- 加QQ574427343或者邮件到 574427343@qq.com邮箱 *注明 领取开发技能提升文档*

<table>
    <tr>
        <td><img src="https://gitee.com/ldhnet/Antflow-Designer/raw/master/public/images/wxpay.jpg"/></td>
        <td><img src="https://gitee.com/ldhnet/Antflow-Designer/raw/master/public/images/alipay.jpg"/></td>
    </tr>  
</table>

## 好书推荐

大家在使用本项目时，推荐结合贺波老师的书
[《深入Flowable流程引擎：核心原理与高阶实战》](https://item.jd.com/14804836.html)学习。这本书得到了Flowable创始人Tijs Rademakers亲笔作序推荐，对系统学习和深入掌握Flowable的用法非常有帮助。

> flowable源于activiti,很多核心表,核心api和设计模式都是一样的.读flowable的书同样也可以用在activiti上

![图书image](https://gitee.com/tylerzhou/Antflow/raw/master/doc/images/flowablebook.jpg)