使用logicflow流程图实例

妖136

已于 2024-02-22 15:23:06 修改

阅读量2.9k

点赞数 26

文章标签：流程图

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

本文链接：https://blog.csdn.net/yao136/article/details/136234874

版权

文章讲述了作者在没有使用国外流程引擎如flowable和activiti的情况下，选择滴滴开源的logicflow进行国内项目开发，包括代码示例、图形绘制、XML/JSON转换功能，以及后续的扩展需求。

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

一.背景

需要使用流程引擎开发项目，没有使用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"></sc

最低0.47元/天解锁文章