使用logicflow流程图实例

原创

已于 2024-02-22 15:23:06 修改 · 3.5k 阅读

于 2024-02-22 15:20:16 首次发布

一.背景

需要使用流程引擎开发项目，没有使用flowable、activiti这类的国外流程引擎，想使用国内的引擎二次开发，缺少单例模式的流程画图程序，都是vue、react、angluer的不适合，从网上找了antx6、logicflow、bpmn.js。感觉最容易使用的是logicflow（滴滴开源的），所以翻模了官方示例（官方使用的react）。

二.代码

gitee链接地址：logicflow: logicflow流程图

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>流程实例</title>



<link rel="stylesheet" href="./logicflow/core/dist/style/index.css" />

<script src="./logicflow/core/dist/logic-flow.js"></script>



<link rel="stylesheet" href="./logicflow/extension/lib/style/index.css" />



<script src="./logicflow/extension/lib/Menu.js"></script>



<script src="./logicflow/extension/lib/DndPanel.js"></script>

<script src="./logicflow/extension/lib/Control.js"></script>



<script src="./logicflow/extension/lib/SelectionSelect.js"></script>

<script src="./logicflow/extension/lib/BpmnAdapter.js"></script>

<script src="./logicflow/extension/lib/BpmnElement.js"></script>



<script src="./logicflow/extension/lib/Snapshot.js"></script>



<script src="./logicflow/extension/lib/MiniMap.js"></script>

<script src="./logicflow/extension/lib/NodeResize.js"></script>

<script src="./logicflow/extension/lib/CurvedEdge.js"></script>



<script src="./logicflow/extension/lib/lfJson2Xml.js"></script>

<script src="./logicflow/extension/lib/lfXml2Json.js"></script>



<script src="./js/node.js"></script>

<link rel="stylesheet" href="./css/index.css" />

<style type="text/css">

html,body{

&n