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

LogicFlow介绍

news 来源：原创 2025/8/10 5:19:55

LogicFlow介绍

LogicFlow是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批流配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。

更多资料请查看 LogicFlow 系列文章
在这里插入图片描述

特性

可视化模型：通过 LogicFlow 提供的直观可视化界面，用户可以轻松创建、编辑和管理复杂的逻辑流程图。
高可定制性：用户可以根据自己的需要定制节点、连接器和样式，创建符合特定用例的定制逻辑流程图。
自执行引擎：执行引擎支持浏览器端执行流程图逻辑，为无代码执行提供新思路。

快速上手

安装
命令安装
通过使用 npm、yarn、pnpm 进行安装。

npm install @logicflow/core --save# 插件包（不使用插件时不需要引入）
npm install @logicflow/extension --save

或者

yarn add @logicflow/core# 插件包（不使用插件时不需要引入）
yarn add @logicflow/extension

或者

pnpm add @logicflow/core# 插件包（不使用插件时不需要引入）
pnpm add @logicflow/extension

通过CDN引入

由于LogicFlow本身会有一些预置样式，所以除了需要引入js包外还需要引入css包。

2.0版本之后的CDN包的引入方式


<!-- 引入 core包和对应css -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/index.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@logicflow/core/lib/style/index.min.css" rel="stylesheet"><!--  引入 extension包和对应css（不使用插件时不需要引入） -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/extension/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/style/index.min.css" />

2.0版本以前的CDN包的引入方式


<!-- 引入 core包和对应css -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/core@1.2.27/dist/logic-flow.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@logicflow/core@1.2.27/dist/style/index.css" rel="stylesheet"><!--  引入 extension包和对应css（不使用插件时不需要引入） -->
<!-- 值得注意的是：2.0版本之前，插件的脚本包是分开导出的 -->
<!-- 因此引入某个组件，引用路径需要具体到包名，就像下文引入Menu插件这样👇🏻 -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/extension@1.2.27/lib/Menu.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/extension@1.2.27/lib/style/index.css" />

默认情况下CDN引入的是最新版本的包，如需引入其他版本的包，可到此处查看具体包信息： core包、 entension包，再根据自己的诉求在cdn路径中加上包版本。

开始使用

1. 在原生JS环境下使用

<!-- 引入 core 包和对应 css-->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/index.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@logicflow/core/lib/style/index.min.css" rel="stylesheet"><!-- 创建画布容器 -->
<div id="container"></div><script>
// 引入继承节点，引入 core 包后，会自动挂载 window.Core 
// const { RectNode, RectNodeModel } = Core;// 准备图数据
const data = {// 节点nodes: [{id: '21',type: 'rect',x: 100,y: 200,text: 'rect node',},{id: '50',type: 'circle',x: 300,y: 400,text: 'circle node',},],// 边edges: [{type: 'polyline',sourceNodeId: '50',targetNodeId: '21',},],
}// 创建画布实例，也可以 new Core.LogicFLow
const lf = new Core.default({container: document.querySelector('#container'),width: 700,height: 500,grid: true,
})// 渲染画布实例
lf.render(data)
</script>

2. 在框架中使用

LogicFlow 本身是以 umd 打包为纯 JS 的包，所以无论是 vue 还是 react 都可以使用。

Tip

LogicFlow初始化时支持不传画布宽高，这种情况下默认取的是container参数传入的DOM节点的宽高。

为了保障画布能正常渲染，请在确保对应容器已存在且有宽高后再初始化LogicFlow实例。

在React中使用

import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/index.css';
import { useEffect, useRef } from 'react';export default function App() {const refContainer = useRef(null);const data = {// 节点nodes: [{id: '21',type: 'rect',x: 300,y: 100,text: 'rect node',},{id: '50',type: 'circle',x: 500,y: 100,text: 'circle node',},],// 边edges: [{type: 'polyline',sourceNodeId: '50',targetNodeId: '21',},],};useEffect(() => {const lf = new LogicFlow({container: refContainer.current,grid: true,height: 200,});lf.render(data);lf.translateCenter();}, []);return <div className="App" ref={refContainer}></div>;
}

在Vue框架中使用

<template><div class="container" ref="container"></div>
</template><script>import LogicFlow from "@logicflow/core";import "@logicflow/core/lib/style/index.css";// import "@logicflow/core/dist/style/index.css"; // 2.0版本前的引入方式export default {mounted() {this.lf = new LogicFlow({container: this.$refs.container,grid: true,});this.lf.render();},};
</script><style scoped>.container {width: 1000px;height: 500px;}
</style>

参考https://site.logic-flow.cn/tutorial/get-started

LogicFlow介绍

LogicFlow介绍 LogicFlow是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批流配置、机器人逻辑编排、无代码平…...

编程日记 2025/8/10 5:19:55

Docker搭建MySQL主从服务器

一、在主机上创建MySQL配置文件——my.cnf master服务器配置文件路径：/data/docker/containers/mysql-cluster-master/conf.d/my.cnf slave服务器配置文件路径： /data/docker/containers/mysql-cluster-master/conf.d/my.cnf master服务配置文件内容 …...

编程日记 2025/8/9 15:09:03

计算机二级web易错点（4）-选择题

选项 A：<input type"radio"> 用于创建单选按钮，同一组单选按钮中只能选择一个选项，所以该选项不符合要求。选项 B：HTML 中没有 type"check" 这种类型，是错误的写法，不能产生复选…...

编程日记 2025/8/10 5:12:54

3.19学习总结

学习了Java中的面向对象的知识点完成一道算法题，找树左下角的值，错误的以为左下角只能是最底层的左节点，但指的是最底层最左边的节点...

编程日记 2025/8/10 5:11:58

Swagger-告别手写文档

文章目录 1. 引言2. Swagger是什么？3. SpringBoot2.7.3集成Swagger4. 常见注解 1. 引言在RESTful API开发中，维护准确、易读的接口文档是团队协作的核心挑战，通常接口文档分为离线的和实时的。离线的接口文档工具有 YAPI等，其中…...

编程日记 2025/8/10 5:14:32

LeetCode-回文数

原题链接：9. 回文数 - 力扣（LeetCode） 首先我会想到的是，将这个数字转成字符串，然后通过前后指针判断是否相等，最终返回结果是否为回文数，时间复杂度：O(n)，空间复杂度&am…...

编程日记 2025/8/5 10:26:14

数据结构之链表（双链表）

目录一、双向带头循环链表概念二、哨兵位的头节点优点： 头节点的初始化三、带头双向链表的实现 1.双链表的销毁 2.双链表的打印 3.双链表的尾插和头插尾插： 头插： 4.双链表的尾删和头删尾删： 头删： …...

编程日记 2025/8/10 5:10:05

硬件基础（5）：（2）二极管分类

文章目录 📌 二极管的分类与详细介绍1. **整流二极管（Rectifier Diode）**特点：选型依据：补充说明： 2. **快恢复二极管（Fast Recovery Diode）**特点：选型依据：…...

编程日记 2025/8/10 5:10:22

MQTT 和 Modbus 的优缺点对比

MQTT和Modbus协议是物联网（IoT）躲不开的两种协议，市面上覆盖了百分之98的产品。 MQTT由IBM在1999年发布。2014年，MQTT成为OASIS（结构化信息标准促进组织）的标准，后来被ISO/IEC 20922正式采纳&a…...

编程日记 2025/8/10 5:10:22

Android14 系统左右声音通道设置代码

Android14 系统左右声音通道设置代码文章目录 Android14 系统左右声音通道设置代码一、前言二、系统级设置左右声音通道分析1、各方案设置左右声音通道的主要代码（1）3588 Android13 方案的实现（2）9679 Android14 方案的实现&…...

编程日记 2025/8/6 7:41:13

【Golang】go如何通过atomic原子操作来确保数据一致性

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全…...

编程日记 2025/8/10 5:19:54

2025年汽车加气站操作工考试精选题库

汽车加气站操作工题库中题目及答案： 单项选择题 1、按压力容器的设计压力分为（ ）个压力等级。 A. 3 B. 4 C. 5 答案：B 2、缓冲罐的安装位置在天然气压缩机（ ）。 A. 前 B. 后 C. 中间答案&#…...

编程日记 2025/8/9 13:04:26

LLVM学习--外部项目

不包含于核心LLVM和Clang存储库的项目需要单独下载。在本章中，我们将介绍各种其他官方LLVM项目，并介绍如何构建和安装它们。仅仅对核心LLVM工具感兴趣的读者可以跳过本章，或者在需要的时候翻阅。在本章中，我们将介绍以下项目安装…...

编程日记 2025/8/8 15:22:04

AUTOSAR_DoIP_Detailed

AUTOSAR DoIP模块详解基于AUTOSAR标准的诊断通信协议实现目录架构概述通信流程消息格式配置结构详细序列总结1. 架构概述 1.1 模块架构 DoIP模块是AUTOSAR基础软件中负责诊断通信的核心组件。它通过TCP/IP网络实现诊断工具与ECU之间的通信。主要功能包括：基础功能基于UD…...

编程日记 2025/8/10 5:17:24

C语言：（大数相加版）数字阶梯求和

题目： 给定a和n，计算aaaaaaa...a(n个a)的和。输入测试数据有多组，输入a，n（1<a<9,1<n<100）。输出对于每组输入,请输出结果。分析： 1. 方式和规定：大数相加必然越界…...

编程日记 2025/8/8 16:06:49

Echarts 折线图

功能每月记录值，当数据大于600画红线，小于300画蓝线，其他在中间值为黑线。鼠标移动上去后，现在数据值。 option {tooltip: {trigger: axis, // 触发类型：坐标轴触发show: true, // 显示提示框formatter: function …...

编程日记 2025/8/10 5:19:55

element-plus中Dropdown下拉菜单组件的使用

1、基本使用复制下面的代码：  <el-dropdown trigger"click"><span class"el-dropdown-link"><span style"width:60px;color:#404040">查询类型</span><el-icon class"e…...

编程日记 2025/8/8 2:28:19

Kafka详解——介绍与部署

1. 什么是 Kafka？ Kafka 是一个分布式的消息队列系统，最初由 LinkedIn 开发，后来成为 Apache 开源项目。它的主要用途包括实时数据处理、日志收集、数据流管道构建等。Kafka 具备高吞吐量、可扩展性、持久性和容错性，广泛应用于大…...

编程日记 2025/8/6 5:11:13

定义在 src\http\ngx_http_core_module.h typedef struct {/* array of the ngx_http_server_name_t, "server_name" directive */ngx_array_t server_names;/* server ctx */ngx_http_conf_ctx_t *ctx;u_char *file_…...

编程日记 2025/8/5 11:03:42

4.angular 服务

服务是在controller里面引入的服务： 最好是内部服务在前面，自定义服务在后面内部服务 $scope $scope.$watch(‘属性名’, function(newVal, oldVal) {}, true) true是深度监听,对象函数等$scope.$apply 触发页面更新,里面传入回调函数,比如说之前那个…...

编程日记 2025/8/8 14:02:12

[动手学习深度学习]26. 网络中的网络 NiN

前面的LeNet、AlexNet、VGG在设计上的共同之处在于：先以卷积层构成的模块充分抽取空间特征，再以全连接层构成的模块来输出分类结果其中AlexNet和VGG对LeNet的改进主要在于如何对这两个模块价款（增加通道数）和加深这一节的NiN提出…...

编程日记 2025/8/6 18:03:06

【设计模式】原型模式

三、原型模式 3.2 原型模式同工厂模式一样，原型(Prototype) 模式也是一种创建型模式。原型模式通过一个对象 (原型对象)克隆出多个一模一样的对象。实际上，该模式与其说是一种设计模式，不如说是一种创建对象的方法(对象克隆),尤其是创建给…...

编程日记 2025/8/4 20:01:56

力扣题目汇总使用贪心算法解决问题

贪心算法是一种通过局部最优解来获得全局最优解的算法。它的核心思想是：在每一步中选择当前看起来最优的解，并希望通过一系列局部最优选择最终得到全局最优解。 121.买卖股票的最佳时机分析： 在每一天求出当前最优的利润，也就…...

编程日记 2025/8/7 14:51:48

Mac下Ollama安装全攻略：开启本地大模型之旅

文章目录 Mac下Ollama安装全攻略：开启本地大模型之旅一、Ollama 是什么功能特点优势应用场景二、安装前准备（一）系统要求（二）硬件要求三、下载安装包（一）官网下载（二）其…...

编程日记 2025/8/9 5:10:27

[HelloCTF]PHPinclude-labs超详细WP-Level 1-FILE协议

源码分析 <?php include("get_flag.php");isset($_GET[wrappers]) ? include("file://".$_GET[wrappers]) : ;highlight_file(__FILE__); ?>第一句 include("get_flag.php");, 使代码包含了 get_flag.php 的内容大概是生成 Flag 之类的…...

编程日记 2025/8/5 15:50:15

Skia 图形引擎介绍

文章目录一、Skia 的基本概念1. 定位与作用2. 历史背景二、Skia 的核心架构1. 模块化设计2. 渲染流程3. 跨平台适配三、Skia 在 Flutter 中的角色1. 自绘 UI 的核心依赖2. 跨平台一致性3. 性能优化四、Skia 的性能优势1. 高效的图形处理2. 与原生渲染的对比3. 性能瓶颈五、…...

编程日记 2025/8/8 12:36:03

构建高可靠NFS存储：自动化挂载保障机制的设计与优势

一、背景与需求场景在分布式系统或集群架构中，NFS（Network File System）是跨节点共享存储的经典方案。然而，传统/etc/fstab配置的静态挂载方式存在明显缺陷： 服务启动顺序不可控，网络未就绪时挂载失败临…...

编程日记 2025/8/6 5:11:13

Spring Boot对接twilio发送邮件信息

要在Spring Boot应用程序中对接Twilio发送邮件信息，您可以使用Twilio的SendGrid API。以下是一个简单的步骤指南，帮助您完成这一过程： 1. 创建Twilio账户并获取API密钥注册一个Twilio账户（如果您还没有的话）。在Twi…...

编程日记 2025/8/9 7:51:28

如何创建并保存HTML文件？零基础入门教程

原文：如何创建并保存HTML文件？零基础入门教程 | w3cschool笔记本文将以Windows系统为例，教你用最简单的记事本创建并保存第一个HTML网页。 📝 第一步：准备工具文本编辑器：使用系统自带的记事本&#xff…...

编程日记 2025/8/3 13:03:47

vue3 + css 列表无限循环滚动+鼠标移入停止滚动+移出继续滚动

1.动画文件.vue <template><div class"dashboard" click"setFullScreen"><div class"warp-box"><el-scrollbar ref"scrollRef" height"100%" scroll"handelScroll"><div class"…...

编程日记 2025/8/10 4:45:05

C#的简单工厂模式、工厂方法模式、抽象工厂模式

工厂模式是一种创建型设计模式，主要将对象的创建和使用分离，使得系统更加灵活和可维护。常见的工厂模式有简单工厂模式、工厂方法模式和抽象工厂模式，以下是 C# 实现的三个案例： 简单工厂模式简单工厂模式通过一个工厂类来创建…...

编程日记 2025/8/6 15:19:56

Vue：Vue2和Vue3创建项目的几种常用方式以及区别

前言 Vue.js 和 Element UI 都是用 JavaScript 编写的。 1、Vue.js 是一个渐进式 JavaScript 框架。2、Element UI 是基于 Vue.js 的组件库。3、JavaScript 是这两个项目的主要编程语言。而Element Plus是基于TypeScript开发的。一、Vue2 1、基于vuecli工具创建 vue2 …...

编程日记 2025/8/6 2:17:48

C++ list类

C list类目录 C list类引言1.list的使用1.1 list的构造1.2 list的iterator的使用1.3 list capacity1.4 list element acess1.5 list modifiers 2. list的迭代器失效3. list的模拟实现3.1 List.h文件3.2 List的反向迭代器 4.list与vector的对比引言在C标准库中，l…...

编程日记 2025/8/6 5:01:57

LeetCode 热题 100_跳跃游戏（78_55_中等_C++）（贪心算法）

LeetCode 热题 100_跳跃游戏（78_55） 题目描述：输入输出样例：题解：解题思路：思路一（贪心算法）： 代码实现代码实现（思路一（贪心算法）&am…...

编程日记 2025/8/4 15:46:40

【Redis】Redis的数据删除(过期)策略，数据淘汰策略。

如果问到：假如Redis的key过期之后，会立即删除吗？ 其实就是想问数据删除(过期)策略。如果面试官问到：如果缓存过多，内存是有限的，内存被占满了怎么办？ 其实就是问：数据的淘汰策略。…...

编程日记 2025/8/7 5:31:09

C++和标准库速成(八)——指针、动态数组、const、constexpr和consteval

目录 1. 指针和动态数组1.1 栈和自由存储区1.2 使用指针1.3 动态分配的数组1.4 空指针常量 2. const2.1 const修饰类型2.2 const与指针2.3 使用const保护参数2.4 const方法(建议） 3. constexpr4. consteval参考 1. 指针和动态数组动态内存允许所创建的程序具有在编…...

编程日记 2025/8/6 16:29:39

深入解析 Spring Boot 中的 FailureAnalyzer

深入解析 Spring Boot 中的 FailureAnalyzer 在 Spring Boot 应用中，我们难免会遇到启动失败的情况，而默认的异常信息往往过于复杂，导致排查问题变得困难。Spring Boot 提供了一套强大的 FailureAnalyzer 机制，能够捕获常见的异常…...

编程日记 2025/8/6 20:34:34

20. Excel 自动化：Excel 对象模型

一 Excel 对象模型是什么 Excel对象模型是Excel图形用户界面的层次结构表示，它允许开发者通过编程来操作Excel的各种组件，如工作簿、工作表、单元格等。 xlwings 是一个Python库，它允许Python脚本与Excel进行交互。与一些其他Python库&#x…...

编程日记 2025/8/7 11:46:06

【Matlab GUI】封装matlab GUI为exe文件

注：封装后的exe还是需要有matlab环境才能运行 （1）安装MCRinstaller.exe文件，在matlab安装目录下的toolbox/compiler/deploy/win64文件夹里 （2）安装完MCRinstaller.exe，字命令窗口输入&#x…...

编程日记 2025/8/6 0:20:44

ModBus TCP/RTU互转（主）（从）|| Modbus主动轮询下发的工业应用 || 基于智能网关的串口服务器进行Modbus数据收发的工业应用

目录前言一、ModBus TCP/RTU互转（从）及应用|| 1.1 举栗子二、ModBus TCP/RTU互转（主） 2.1 举栗子三、ModBus 主动轮询 3.1 Modbus主动轮询原理 3.2 Modbus格式上传与下发 3.2.1.设置Modbus主动轮询指令 3.2.2 设…...

编程日记 2025/8/6 8:45:15

Linux top 命令详解：从入门到高级用法

Linux top 命令详解：从入门到高级用法在 Linux 系统中，top 是一个强大的实时监控工具，用于查看系统资源使用情况和进程状态。它可以帮助你快速了解 CPU、内存、负载等信息，是系统管理员和开发者的日常利器。本文将从基本用法开始…...

编程日记 2025/8/4 20:07:25

【网络协议】基于UDP的可靠协议：KCP

TCP是为流量设计的（每秒内可以传输多少KB的数据），讲究的是充分利用带宽。而 KCP是为流速设计的（单个数据包从一端发送到一端需要多少时间），以10%-20%带宽浪费的代价换取了比 TCP快30%-40%的传输速度。TCP信…...

编程日记 2025/8/5 18:03:11

【Docker入门】构建推送第一个Docker映像

【Docker入门】构建推送第一个Docker映像 Build and Push the First Docker Image By JacksonML Docker的容器(Container)映像是轻量级的可执行独立包，包含代码、运行时、库、环境变量以及配置文件，它对于运行软件至关重要。注册表可在团队间分享映像。…...

编程日记 2025/8/9 19:44:30

Python----计算机视觉处理（Opencv：图像颜色替换）

一、开运算开运算就是对图像先进行腐蚀操作， 然后进行膨胀操作。开运算可以去除二值化图中的小的噪点，并分离相连的物体。其主要目的就是消除那些小白点在开运算组件中，有一个叫做kernel的参数，指的是核的大小，通常…...

编程日记 2025/8/9 1:07:27

搭建自己的OCR服务

网上看到相关文章，这里整理记录一下，仅供学习。搭建自己的OCR服务，第一步：选择合适的开源OCR项目 - PandaCode辉 - 博客园一、OCR是什么？ 光学字符识别（Optical Character Recognition, OCR&#xff09…...

编程日记 2025/8/4 20:08:33

vue：组件的使用

Vue：组件的使用 1、什么是组件 1.1、传统方式开发的应用一个网页通常包括三部分：结构（HTML）、样式（CSS）、交互（JavaScript）。在传统开发模式下，随着项目规模的增大&a…...

编程日记 2025/8/5 18:12:04

leetcode日记（105）买卖股票的最佳时机Ⅱ

原本以为是一个很难想的动态规划，没想到是最简单的贪心…… 如果实在想不出就画个折线图，只买上涨的就行了，所有上涨的段都取到。真的没想到会这么简单…… class Solution { public:int maxProfit(vector<int>& prices) {int …...

编程日记 2025/8/7 23:22:14

7种数据结构

7种数据结构顺序表sqlite.hseqlite.c 单链表linklist.clinklist.h 双链表doulinklist.cdoulinklist.h 链式栈linkstack.clinkstack.h 队列SeqQueue.cSeqQueue.h 树tree.c 哈希表hash.c 顺序表 sqlite.h #ifndef __SEQLIST_H__ #define __SEQLIST_H__ typedef struct person…...

编程日记 2025/8/9 1:22:34

论文阅读：Deep Hybrid Camera Deblurring for Smartphone Cameras

今天介绍一篇 ACM SIGGRAPH 2024 的文章，关于手机影像中的去模糊的文章。 Deep Hybrid Camera Deblurring for Smartphone Cameras Abstract 手机摄像头尽管取得了显著的进步，但由于传感器和镜头较为紧凑，在低光环境下的成像仍存在困难&am…...

编程日记 2025/8/1 5:37:03

Redis 三主三从集群部署的完整方案

一、架构设计原理‌ 分布式数据分片哈希槽机制‌：Redis Cluster 将数据划分为 16384 个槽位，每个主节点负责部分槽位（如主节点1管理槽0-5460，主节点2管理5461-10922等）。自动负载均衡‌：数据按哈希值分配…...

编程日记 2025/8/6 20:04:13

LogicFlow介绍

特性

快速上手

通过CDN引入

开始使用

1. 在原生JS环境下使用

2. 在框架中使用

Tip

在React中使用

在Vue框架中使用

相关文章：