当前位置： 首页 > news >正文

使用logicflow流程图实例

news 2026/5/17 10:36:00

一.背景

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

    <!-- 引入 core包 -->

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

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

    <!-- 引入 extension包样式 -->

    <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>

    <!-- 内容转换 xml 或者 json -->

    <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{

            width: 100%;

            height: 100%;

            padding: 0;

            margin: 0;

        }

    </style>

</head>

<body>

    <div class="container">

        <!-- 按钮操作 -->

        <div class="example-header">

            <div class="content" >

            <div>

                    <button>保存</button>

            </div>

            </div>

            <div class="tools">

                <span>logicflow 流程信息111</span>

            </div>

        </div>

        <!--绘制中间图形-->

        <div class="bpmn-example-container" >

            <div id="graph" class="viewport" ></div>

        </div>

        <!--属性面板-->

        <div class="property-panel"  id="test" style="display: none;" >

            <div>

                <h2>属性面板</h2>

               

                <div>

                <h3>......</h3>

                <h3>业务属性可根据需要进行自定义扩展</h3>

                </div>

                <div class="property-panel-footer">

                    <button class="property-panel-footer-hide"

                    type="primary"

                    οnclick="hidePropertyPanel()">

                    收起

                    </button>

                </div>

            </div>

        </div>

        <!--操作模型-->

        <div class="graph-io">

            <span

            title="下载 XML"

            οnclick="downloadXml()">

            <img src="./img/download.png" alt="下载XML" />

            </span>

            <span

            id="download-img"

            title="下载图片"

            οnclick="downloadImage()">

            <img src="./img/img.png" alt="下载图片" />

            </span>

            <span

            id="upload-xml"

            title="上传 XML">

            <input type="file" class="upload" accept=".xml" οnchange="uploadXml(event)"/>

            <img src="./img/upload.png" alt="上传XML" />

            </span>

        </div>

    </div>

</body>

<script type="text/javascript">

    // LogicFlow.use(Control); // 控制面板

    // LogicFlow.use(Menu); // 右键菜单

    // LogicFlow.use(DndPanel); // 拖拽面板

    // LogicFlow.use(SelectionSelect); // 拖拽面板

    const lf = new LogicFlow({

        container: document.querySelector("#graph"),

        stopScrollGraph: true,

        stopZoomGraph: true,

        metaKeyMultipleSelected: true,

        grid: {

            size: 10,

            type: 'dot',

        },

        keyboard: {

            enabled: true,

        },

        snapline: true,

        //引入插件

        plugins: [Menu,DndPanel, SelectionSelect,BpmnAdapter,BpmnElement,MiniMap,Control,NodeResize,Snapshot]

    });

    //设置拖转节点

    lf.extension.dndPanel.setPatternItems(modelNode);

    // const data = lfJson2Xml(jsonData);

    // lf.render(data);

    // const xml = lfJson2Xml(lf.getGraphData());

    //渲染内容

    lf.render(graphData);

    //小地图

    lf.extension.control.addItem({

        key: 'mini-map',

        iconClass: "custom-minimap",

        title: "",

        text: "导航",

        onMouseEnter: (lf, ev) => {

            const position = lf.getPointByClient(ev.x, ev.y);

            lf.extension.miniMap.show(

            position.domOverlayPosition.x - 120,

            position.domOverlayPosition.y + 35

            );

        },

        onClick: (lf, ev) => {

            const position = lf.getPointByClient(ev.x, ev.y);

            lf.extension.miniMap.show(

            position.domOverlayPosition.x - 120,

            position.domOverlayPosition.y + 35

            );

        },

    });

    //lf.extension.miniMap.show(0, 0);

    //图片处理渲染，下载图片有用

    lf.extension.snapshot.useGlobalRules = false;

    lf.extension.snapshot.customCssRules = `

        .lf-node-text-auto-wrap-content{

        line-height: 1.2;

        background: transparent;

        text-align: center;

        word-break: break-all;

        width: 100%;

        }

        .lf-canvas-overlay {

        background: #ffffff;

        }

    `;

    //点击事件

    lf.on("node:click,edge:click", (data) => {

        console.log(data);

        hidePropertyPanel();

    });

    //切换显示隐藏属性面板

    function hidePropertyPanel()

    {

        var traget = document.getElementById('test');//选取id为test的div元素

        if(traget.style.display=="none"){

            traget.style.display="block";

        }else{

            traget.style.display="none";

        }

    }

    //下载内容

    function download(filename, text) {

        var element = document.createElement('a');

        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));

        element.setAttribute('download', filename);

        element.style.display = 'none';

        document.body.appendChild(element);

        element.click();

        document.body.removeChild(element);

    }

    //下载xml

    function downloadXml()

    {

        const data = lf.getGraphData();

        download('logic-flow.xml', lfJson2Xml(data));

    }

    //下载截图

    function downloadImage()

    {

        lf.getSnapshot();

    }

    //上传xml渲染

    function uploadXml(event) {

        const file = event.target.files[0];

        const reader = new FileReader()

        reader.readAsText(file, 'UTF-8');

        reader.onload = function(e){

            if (e.target) {

                const xml = e.target.result;

                console.log(xml);

                //将xml转成json渲染

                lf.render(lfXml2Json(xml));

            }

        }

    }

</script>

</html>

三.效果图

可以下载bpm的xml模型，也可以上传xml模型使用

四.后续还需要程序的扩展。

相关文章：

使用logicflow流程图实例

一.背景 需要使用流程引擎开发项目&#xff0c;没有使用flowable、activiti这类的国外流程引擎&#xff0c;想使用国内的引擎二次开发&#xff0c;缺少单例模式的流程画图程序&#xff0c;都是vue、react、angluer的不适合&#xff0c;从网上找了antx6、logicflow、bpmn.js。感…...

编程日记 2024/2/25 7:28:06

Stable Diffusion 绘画入门教程（webui）-ControlNet(IP2P）

上篇文章介绍了深度Depth&#xff0c;这篇文章介绍下IP2P&#xff08;InstructP2P&#xff09;, 通俗理解就是图生图&#xff0c;给原有图加一些效果,比如下图&#xff0c;左边为原图&#xff0c;右边为增加了效果的图&#xff1a; 文章目录 一、选大模型二、写提示词三、基础参…...

编程日记 2024/2/25 7:26:04

五力分析（Porter‘s Five Forces）

五力分析是一种用于评估竞争力的框架&#xff0c;由哈佛商学院教授迈克尔波特&#xff08;Michael Porter&#xff09;提出。它通过分析一个行业的五个关键力量&#xff08;竞争对手、供应商、顾客、替代品和新进入者&#xff09;来评估一个企业或行业的竞争环境。这个框架可以…...

编程日记 2024/2/25 7:18:58

十一、Qt数据库操作

一、Sql介绍 Qt Sql模块包含多个类&#xff0c;实现数据库的连接&#xff0c;Sql语句的执行&#xff0c;数据获取与界面显示&#xff0c;数据与界面直接使用Model/View结构。1、使用Sql模块 &#xff08;1&#xff09;工程加入 QT sql&#xff08;2&#xff09;添加头文件 …...

编程日记 2024/2/25 7:17:56

【Spring】IoC容器 控制反转 与 DI依赖注入 XML实现版本 第二期

文章目录 基于 XML 配置方式组件管理前置 准备项目一、 组件&#xff08;Bean&#xff09;信息声明配置&#xff08;IoC&#xff09;&#xff1a;1.1 基于无参构造1.2 基于静态 工厂方法实例化1.3 基于非静态 工厂方法实例化 二、 组件&#xff08;Bean&#xff09;依赖注入配置…...

编程日记 2024/2/25 7:16:54

神经网络系列---感知机(Neuron)

文章目录 感知机(Neuron)感知机(Neuron)的决策函数可以表示为&#xff1a;感知机(Neuron)的学习算法主要包括以下步骤&#xff1a;感知机可以实现逻辑运算中的AND、OR、NOT和异或(XOR)运算。 感知机(Neuron) 感知机(Neuron)是一种简单而有效的二分类算法&#xff0c;用于将输入…...

编程日记 2024/2/25 7:13:52

k8s（2）

目录 一.二进制部署k8s 常见的K8S安装部署方式&#xff1a; k8s部署 二进制与高可用的区别 二.部署k8s 初始化操作&#xff1a; 每台node安装docker&#xff1a; 在 master01 节点上操作; 准备cfssl证书生成工具:&#xff1a; 执行脚本文件&#xff1a; 拉入etcd压缩包…...

编程日记 2024/2/25 7:12:51

利用nginx内部访问特性实现静态资源授权访问

在nginx中&#xff0c;将静态资源设为internal&#xff1b;然后将前端的静态资源地址改为指向后端&#xff0c;在后端的响应头部中写上静态资源地址。 近期客户对我们项目做安全性测评&#xff0c;暴露出一些安全性问题&#xff0c;其中一个是有些静态页面&#xff08;*.html&…...

编程日记 2024/2/25 7:09:48

fly-barrage 前端弹幕库（1）：项目介绍

fly-barrage 是我写的一个前端弹幕库&#xff0c;由于经常在 Bilibili 上看视频&#xff0c;所以对网页的弹幕功能一直蛮感兴趣的&#xff0c;所以做了这个库&#xff0c;可以帮助前端快速的实现弹幕功能。 项目官网地址&#xff1a;https://fly-barrage.netlify.app/&#xff…...

编程日记 2024/2/25 7:05:44

jetcache如果一个主体涉及多个缓存时编辑或者删除时如何同时失效多个缓存

在实际使用过程中&#xff0c;可能会遇到这种情形&#xff1a;一个主体会有多个缓存&#xff0c;比如用户基础信息缓存、用户详情缓存&#xff0c;那么当删除用户信息后就需要同时失效多个缓存中该主体数据&#xff0c;那么jetcache支持这种应用场景么&#xff0c;答案是支持&a…...

编程日记 2024/2/25 7:04:43

uni-app 实现拍照后给照片加水印功能

遇到个需求需要实现&#xff0c;研究了一下后写了个demo 本质上就是把拍完照后的照片放到canvas里&#xff0c;然后加上水印样式然后再重新生成一张图片 代码如下&#xff0c;看注释即可~使用的话记得还是得优化下代码 <template><view class"content"&g…...

编程日记 2024/2/25 7:01:39

【ArcGIS】利用DEM进行水文分析：流向/流量等

利用DEM进行水文分析 ArcGIS实例参考 水文分析通过建立地表水文模型&#xff0c;研究与地表水流相关的各种自然现象&#xff0c;在城市和区域规划、农业及森林、交通道路等许多领域具有广泛的应用。 ArcGIS实例 某流域30m分辨率DEM如下&#xff1a; &#xff08;1&#xff09…...

编程日记 2024/2/25 7:00:38

论文阅读笔记——PathAFL：Path-Coverage Assisted Fuzzing

文章目录 前言PathAFL&#xff1a;Path-Coverage Assisted Fuzzing1、解决的问题和目标2、技术路线2.1、如何识别 h − p a t h h-path h−path&#xff1f;2.2、如何减少 h − p a t h h-path h−path的数量&#xff1f;2.3、哪些h-path将被添加到种子队列&#xff1f;2.4、种…...

编程日记 2024/2/25 6:56:34

C语言中各种运算符用法

C语言中有许多不同的运算符&#xff0c;用于执行各种不同的操作。 以下是C语言中常见的运算符及其用法&#xff1a; 算术运算符&#xff1a; 加法运算符&#xff08;&#xff09;&#xff1a;用于将两个值相加。减法运算符&#xff08;-&#xff09;&#xff1a;用于将一个值减…...

编程日记 2024/2/25 6:53:32

pythonJax小记（五）：python: 使用Jax深度图像（正交投影和透视投影之间的转换）（持续更新，评论区可以补充）

python: 使用Jax深度图像&#xff08;正交投影和透视投影之间的转换&#xff09; 前言问题描述1. 透视投影2. 正交投影 直接上代码解释1. compute_projection_parameters 函数a. 参数解释b. 函数计算 2. ortho_to_persp 函数a. 计算投影参数&#xff1a;b. 生成像素坐标网格&am…...

编程日记 2024/2/25 6:51:30

web安全学习笔记【16】——信息打点（6）

信息打点-语言框架&开发组件&FastJson&Shiro&Log4j&SpringBoot等[1] #知识点&#xff1a; 1、业务资产-应用类型分类 2、Web单域名获取-接口查询 3、Web子域名获取-解析枚举 4、Web架构资产-平台指纹识别 ------------------------------------ 1、开源-C…...

编程日记 2024/2/25 6:50:29

145.二叉树的后序遍历

// 定义一个名为Solution的类&#xff0c;用于解决二叉树的后序遍历问题 class Solution { // 定义一个公共方法&#xff0c;输入是一个二叉树的根节点&#xff0c;返回一个包含后序遍历结果的整数列表 public List<Integer> postorderTraversal(TreeNode root) { /…...

编程日记 2024/2/25 6:49:28

ssh远程连接免密码访问

我们在远程登录的时候&#xff0c;经常需要输入密码&#xff0c;密码往往比较复杂&#xff0c;输入比较耗费时间&#xff0c;这种情况下可以使用ssh免密码登录。 一般的教程是需要生成ssh密钥后&#xff0c;然后把密钥复制到server端完成配置&#xff0c;这里提供一个简单的方…...

编程日记 2024/2/25 6:48:27

Vue-Json-Schema-Form: 如何基于模板定制前端页面

本人从事的是工业物联网， 面对工业设备的通讯难题是各大设备都有各自的通讯协议， 如果想要用一款硬件去和所有设备做通讯的话， 就得面对怎么把自己想要采集的配置下发给自己的采集器的问题， 以前都是采用各种模型去尝试构建配置项， 但是因为配置可能会有深层次嵌套， 而且…...

编程日记 2024/2/25 6:43:22

保存Json对象到数据库

文章目录 背景实现方式1. 直接以 Json 对象保存到数据库2. 以 String 类型保存到数据库 背景 项目过程中可能需要保存 Json 对象到数据库中。 实现方式 有两种实现方式&#xff0c;一种是直接保存 Json 对象到数据库&#xff0c;这种方式在创建实体类以及编写 Mapper XML 脚本…...

编程日记 2024/2/25 6:40:20

SimulinkVeriStandLabVIEW协同开发——从模型编译到交互式仪表盘部署

1. 工具链协同开发的核心价值 在电力电子和工业控制领域&#xff0c;快速原型开发往往需要跨越建模、实时测试和人机交互三个关键环节。Simulink、VeriStand和LabVIEW组成的工具链&#xff0c;就像汽车制造的流水线——Simulink是设计图纸的工程师&#xff0c;VeriStand是组装车…...

编程新知 2026/5/17 9:53:09

框架式幕墙与单元式幕墙的价格差异

框架式幕墙与单元式幕墙的价格差异 框架式幕墙与单元式幕墙由于结构及安装方式的不同，在价格方面存着很大的差异。主要表现在以下几个方面： 铝型材的用量： 框架式幕墙铝型材用量一般在7—9 kg/平方米左右。 单元式幕墙铝型材用量一般在13—15kg/平方米左右。 两者每平方…...

编程新知 2026/5/17 9:06:17

轻量级爬虫框架slacrawl：基于规则驱动的模块化数据采集实践

1. 项目概述&#xff1a;一个轻量级、模块化的网页爬虫框架最近在做一个需要从多个网站定时抓取结构化数据的小项目&#xff0c;找了一圈现成的工具&#xff0c;要么太重&#xff08;像Scrapy&#xff0c;学起来成本高&#xff09;&#xff0c;要么太死板&#xff08;很多脚本只…...

编程新知 2026/5/17 8:58:15

UVa 366 Cutting Up

题目描述 拼布者经常需要将布料切割成 111 \times 111 的小正方形。他们有一种特殊工具&#xff08;旋转切割刀&#xff09;&#xff0c;可以一次切割多层布料&#xff0c;切割层数的上限由布料类型决定&#xff08;题目输入的第一个参数 KKK&#xff09;。切割时&#xff0c;无…...

编程新知 2026/5/17 7:36:05

中文长文本语音崩溃？ElevenLabs API超时/截断/静音突变？20年语音架构师紧急发布的6行容错重试+分段重对齐代码（已验证10万+字符稳定输出）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;中文长文本语音崩溃的根因诊断与现象复现 中文长文本语音合成&#xff08;TTS&#xff09;在处理超长段落&#xff08;如 >3000 字&#xff09;时频繁出现进程中断、内存溢出或静音输出&#xff0c;…...

编程新知 2026/5/17 6:51:16

Arduino与手机蓝牙通信：nRF8001 BLE模块硬件连接与软件配置全解析

1. 项目概述与核心价值如果你手头有一个Arduino项目&#xff0c;想让它和你的手机“说说话”&#xff0c;比如把传感器数据无线传到手机App上显示&#xff0c;或者用手机App远程控制几个LED灯&#xff0c;那么nRF8001这个蓝牙低功耗&#xff08;BLE&#xff09;模块绝对是你绕不…...

编程新知 2026/5/17 5:25:26

DIY蓝牙游戏手柄：基于Bluefruit EZ-Key的免编程硬件制作全攻略

1. 项目概述与设计思路几年前&#xff0c;我还在用有线手柄在电脑上打游戏&#xff0c;那根线总是缠来缠去&#xff0c;桌面也乱糟糟的。后来市面上无线手柄选择多了&#xff0c;但总感觉少了点自己动手的乐趣&#xff0c;功能也千篇一律。直到我开始接触像Adafruit Bluefruit …...

编程新知 2026/5/17 5:15:15

基于WebSocket的机械爪远程控制桥接系统设计与实战

1. 项目概述&#xff1a;一个连接物理世界与数字世界的“机械爪”远程控制桥最近在捣鼓一个挺有意思的开源项目&#xff0c;叫lucas-jo/openclaw-bridge-remote。光看名字&#xff0c;你可能觉得这又是一个关于机器人或者机械臂的遥控项目&#xff0c;但实际深入进去&#xff0…...

编程新知 2026/5/17 3:46:03

解密ComfyUI-WanVideoWrapper：在ComfyUI中突破AI视频生成的技术壁垒

解密ComfyUI-WanVideoWrapper&#xff1a;在ComfyUI中突破AI视频生成的技术壁垒 【免费下载链接】ComfyUI-WanVideoWrapper 项目地址: https://gitcode.com/GitHub_Trending/co/ComfyUI-WanVideoWrapper 你是否曾想过将脑海中的创意场景转化为生动的视频内容&#xff0…...

编程新知 2026/5/17 2:43:35

dotAI：将AI能力环境化，打造可配置的智能开发工作流

1. 项目概述&#xff1a;当AI成为你的“数字管家”最近在GitHub上看到一个挺有意思的项目&#xff0c;叫udecode/dotai。乍一看这个标题&#xff0c;你可能和我最初的反应一样&#xff0c;有点摸不着头脑。dotai&#xff1f;是“点AI”的意思吗&#xff1f;它和.env文件那种“点…...

编程新知 2026/5/17 2:13:34