boot-admin整合flowable官方editor-app进行BPMN2.0建模-优快云博客

本文链接：https://blog.youkuaiyun.com/3moods/article/details/130275819

文章详细介绍了如何在Boot-Admin项目中集成Flowable的官方editor-app，以实现BPMN2.0流程图的可视化建模。通过下载Flowable源码、修改配置以适应后端接口，以及在Vue组件中嵌入模型编辑器，实现了模型的创建、查询、编辑和保存等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

boot-admin整合flowable官方editor-app源码进行BPMN2.0建模

正所谓百家争鸣、见仁见智、众说纷纭、各有千秋！在工作流bpmn2.0可视化建模工具实现的细分领域，网上扑面而来的是 bpmn.js 这个渲染工具包和web建模器，而笔者却认为使用flowable官方开源 editor-app 才是王道。

Flowable 开源版本中的 web 版流程设计器editor-app，展示风格和功能基本跟 activiti-modeler 一样，集成简单，开发工作量小，界面美观大方，功能强大，用户体验友好。

通过以下两张Gif动图来个PK，您的直观感受如何呢？
bpmn.js运行效果图（gif动图取自互联网）
在这里插入图片描述

Flowable editor-app运行效果：
在这里插入图片描述

boot-admin 是一款采用前后端分离模式、基于SpringCloud微服务架构的SaaS后台管理框架。系统内置基础管理、权限管理、运行管理、定义管理、代码生成器和办公管理6个功能模块，集成分布式事务Seata、工作流引擎Flowable、业务规则引擎Drools、后台作业调度框架Quartz等，技术栈包括Mybatis-plus、Redis、Nacos、Seata、Flowable、Drools、Quartz、SpringCloud、Springboot Admin Gateway、Liquibase、jwt、Openfeign、I18n等。
gitee源码地址
 github源码地址

下面介绍 boot-admin 对flowable官方bpmn2.0可视化建模工具 editor-app 的集成改造步骤：

获取前端源码

下载官方数据包flowable-6.4.1.zip
从压缩包中解压出flowable-6.4.1\wars下面的flowable-modeler.war
从flowable-modeler.war中解压出 WEB-INF\classes\static\editor-app 文件夹
将数据包中 editor-app 文件夹复制到 boot-admin项目前端工程的 public 文件夹下面
在 boot-admin项目前端工程 public 文件夹下面创建 modeler.html 作为编辑器入口

modeler.html内容：

<!doctype html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Activiti Editor</title>
    <meta name="description" content="">
    <meta name="viewport"
          content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link rel="Stylesheet" media="screen" href="/editor-app/libs/ng-grid-2.0.7.min.css" type="text/css"/>
    <link rel="stylesheet" href="/editor-app/libs/bootstrap_3.1.1/css/bootstrap.min.css"/>
    <link rel="Stylesheet" media="screen" href="/editor-app/editor/css/editor.css" type="text/css"/>
    <link rel="stylesheet" href="/editor-app/css/style.css" type="text/css"/>
    <link rel="stylesheet" href="/editor-app/css/style-common.css">
    <link rel="stylesheet" href="/editor-app/css/style-editor.css">
</head>
<body>
<!-- 不显示flowable logo条 -->
<!-- 	<div class="navbar navbar-fixed-top navbar-inverse" role="navigation" id="main-header">
	    <div class="navbar-header">
            <a href="" ng-click="backToLanding()" class="navbar-brand"
               title="{
   {'GENERAL.MAIN-TITLE' | translate}}"><span
                    class="sr-only">{
   {'GENERAL.MAIN-TITLE' | translate}}</span></a>
        </div>
	</div> -->

	<!--[if lt IE 9]>
	<div class="unsupported-browser">
	    <p class="alert error">You are using an unsupported browser. Please upgrade your browser in order to use the
	        editor.</p>
	</div>
	<![endif]-->

	<div class="alert-wrapper" ng-cloak>
	    <div class="alert fadein {
    {alerts.current.type}}" ng-show="alerts.current" ng-click="dismissAlert()">
	        <i class="glyphicon"
	           ng-class="{
    'glyphicon-ok': alerts.current.type == 'info', 'glyphicon-remove': alerts.current.type == 'error'}"></i>
	        <span>{
  {alerts.current.message}}</span>

	        <div class="pull-right" ng-show="alerts.queue.length > 0">
	            <span class="badge">{
  {alerts.queue.length + 1}}</span>
	        </div>
	    </div>
	</div>

	<div id="main" class="wrapper full clearfix" ng-style="{height: window.height + 'px'}" ng-app="activitiModeler" ng-include="'/editor-app/editor.html'">
	</div>

	<!--[if lt IE 9]>
	<script src="/editor-app/libs/es5-shim-15.3.4.5/es5-shim.js"></script>
	<script src="/editor-app/libs/json3_3.2.6/lib/json3.min.js"></script>
	<![endif]-->

	<script src="/editor-app/libs/jquery_1.11.0/jquery.min.js"></script>
	<script src="/editor-app/libs/jquery-ui-1.10.3.custom.min.js"></script>
	<script src="/editor-app/libs/angular_1.2.13/angular.min.js"></script>
	<script src="/editor-app/libs/angular_1.2.13/angular-animate.min.js"></script>
	<script src="/editor-app/libs/bootstrap_3.1.1/js/bootstrap.min.js"></script>
	<script src="/editor-app/libs/angular-resource_1.2.13/angular-resource.min.js"></script>
	<script src="/editor-app/libs/angular-cookies_1.2.13/angular-cookies.min.js"></script>
	<script src="/editor-app/libs/angular-sanitize_1.2.13/angular-sanitize.min.js"></script>
	<script src="/editor-app/libs/angular-route_1.2.13/angular-route.min.js"></script>
	<script src="/editor-app/libs/angular-translate_2.4.2/angular-translate.min.js"></script>
	<script src="/editor-app/libs/angular-translate-storage-cookie/angular-translate-storage-cookie.js"></script>
	<script src="/editor-app/libs/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
	<script src="/editor-app/libs/angular-strap_2.0.5/angular-strap.min.js"></script>
	<script src="/editor-app/libs/angular-strap_2.0.5/angular-strap.tpl.min.js"></script>
	<script src="/editor-app/libs/momentjs_2.5.1/momentjs.min.js"></script>
	<script src="/editor-app/libs/ui-utils.min-0.0.4.js" type="text/javascript"></script>
	<script src="/editor-app/libs/ng-grid-2.0.7-min.js" type="text/javascript"></script>
	<script src="/editor-app/libs/angular-dragdrop.min-1.0.3.js" type="text/javascript"></script>
	<script src="/editor-app/libs/mousetrap-1.4.5.min.js" type="text/javascript"></script>
	<script src="/editor-app/libs/jquery.autogrow-textarea.js" type="text/javascript"></script>
	<script src="/editor-app/libs/prototype-1.5.1.js" type="text/javascript"></script>
	<script src="/editor-app/libs/path_parser.js" type="text/javascript"></script>
	<script src="/editor-app/libs/angular-scroll_0.5.7/angular-scroll.min.js" type="text/javascript"></script>
	<!-- Configuration -->
	<script src="/editor-app/app-cfg.js?v=1"></script>
	<script src="/editor-app/editor-config.js" type="text/javascript"></script>
	<script src="/editor-app/configuration/url-config.js" type="text/javascript"></script>
	<script src="/editor-app/editor/i18n/translation_en_us.js" type="text/javascript"></script>
	<script src="/editor-app/editor/i18n/translation_signavio_en_us.js" type="text/javascript"></script>
	<script src="/editor-app/editor/oryx.debug.js" type="text/javascript"></script>
	<script src="/editor-app/app.js"></script>
	<script src="/editor-app/eventbus.js" type="text/javascript"></script>
	<script src="/editor-app/editor-controller.js" type="text/javascript"></script>
	<script src="/editor-app/stencil-controller.js" type="text/javascript"></script>
	<script src="/editor-app/toolbar-controller.js" type="text/javascript"></script>
	<script src="/editor-app/header-controller.js" type="text/javascript"></script>
	<script src="/editor-app/select-shape-controller.js" type="text/javascript"></script>
	<script src="/editor-app/editor-utils.js" type="text/javascript"></script>
	<script src="/editor-app/configuration/toolbar-default-actions.js" type="text/javascript"></script>
	<script src="/editor-app/configuration/properties-default-controllers.js" type="text/javascript"></script>
	<script src="/editor-app/configuration/properties-execution-listeners-controller.js" type="text/javascript"></script>
	<script src="/editor-app/configuration/properties-event-listeners-controller.js" type="text/javascript"></script>
	<script src="/editor-app/configuration/properties-assignment-controller.js" type="text/javascript"></script>
	<script src="/editor-app/configuration/properties-fields-controller.js" type="text/javascript"></script>
	<script src="/editor-app/configuration/properties-form-properties-controller.js" type="text/javascript"></script>
	<script src="/editor-app/configuration/properties-in-parameters-controller.js" type="text/javascript"></script>
	<script src="/editor-app/configuration/properties-multiinstance-controller.js" type="text/javascript"></script>
	<script src="/editor-app/configuration/properties-out-parameters-controller.js" type="text/javascript"></script>
	<script <