工作流表单和流程设计前端

流程引擎bpmn-js 画审批流程 FormCreate配置每个审批节点的业务表单广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。FormCreate【VUE表单设计】FormCreate是基于Vue2 / Vue3的开源免费JSON 驱动动态表单引擎 配套开源低代码可视化表单设计器拖拽编辑器FcDesigner通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单提高开发者对表单的开发效率节省开发者的时间。FcDesigner可视化表单设计器TS类型定义 | FcDesigner,产品内置了36种常用组件Rule是描述组件生成规则的核心数据结构。每个组件都有一个唯一的 _fc_id 标识符和其他属性用于定义组件的类型、样式、事件、验证规则。开源版基础免费商用高级功能、AI 助理、源码授权为商业版VForm3 / VForm同类型 Vue 动态表单设计器拖拽式画布可视化搭建表单 → 导出 JSON 规则 → 传给 form-create 渲染form-create核心表单渲染组件输入 JSON 配置rule 规则自动渲染出完整表单工具定位产出物bpmn-jsBPMN 流程图编辑器流程拓扑BPMN XML流程走向、审批人、网关FormCreate动态表单编辑器页面字段JSON 表单规则每个节点需要填写哪些字段bpmn-js【流程设计】bpmn-js 是Camunda 旗下 bpmn.io 开源项目的核心 JavaScript 工具库官网地址https://bpmn.io/toolkit/bpmn-js/bpmn.io开源MIT 协议免费商用GitHub 持续迭代更新定位BPMN 2.0 标准的浏览器端流程图查看器 在线建模编辑器纯前端 JS 实现无需后端服务即可运行可独立使用或嵌入任意 Web 系统Vue/React/ 原生 JS 等完整遵循 BPMN 2.0 官方规范导出的 XML 可通用所有主流工作流引擎Camunda、Flowable、Activiti极强可扩展核心优势模块化插件架构几乎所有界面 / 逻辑都能自定义自定义节点会签、加签、审批专用任务自定义样式、颜色、图标、画布渲染扩展属性面板增加业务自定义字段流程仿真token 模拟流转预览执行路径自定义校验规则、工具栏、提示批注纯浏览器运行基于 SVG 绘图不依赖 Flash / 客户端软件所有渲染、编辑逻辑在前端完成仅读写 XML 与后端交互。配套底层组件diagram-js底层通用画布渲染引擎支撑流程图拖拽、交互bpmn-moddleBPMN XML 解析 / 序列化工具负责模型读写校验二、两大核心模式1. Viewer只读查看器仅渲染展示 BPMN 流程图无编辑能力适合流程详情页、审批查看、实例回放场景加载后端返回的 BPMN XML 渲染画布支持缩放、平移、节点高亮、业务数据标注极简集成几行 JS 代码即可嵌入页面2. Modeler全功能建模编辑器完整可视化拖拽编辑器用于设计 / 编辑业务流程内置全部 BPMN 2.0 标准元素开始 / 结束事件、任务、排他 / 并行网关、泳道、子流程等左侧拖拽面板、右键菜单、底部属性面板支持修改节点名称、流程变量、执行条件可导出标准 BPMN 2.0 XML能直接给 Camunda、Flowable 等流程引擎解析执行内置模型校验提示不符合规范的流程写法支持可视化设计的低代码表单组件|FormCreate好用的低代码可视化表单设计器 | FcDesigner