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

LogicFlow-前端流程图开发

news 来源：原创 2025/8/25 23:46:51

LogicFlow-前端流程图开发

一、安装使用

1、安装logicflow

通过npm安装logicflow

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

2、创建实例

  import LogicFlow from "@logicflow/core";import "@logicflow/core/lib/style/index.css"; // 初始化实例const lf = new LogicFlow({container: document.querySelector('#container'),// 其他配置})// 渲染数据lf.render({// 渲染的数据})

渲染数据如下：

{// 节点数据nodes: [{id: '21', // 节点ID，需要全局唯一，不传入内部会自动生成一个IDtype: 'rect', // 节点类型，可以传入LogicFlow内置的7种节点类型，也可以注册自定义节点后传入自定义类型x: 100, // 节点形状中心在x轴位置y: 100, // 节点形状中心在y轴的位置text: 'Origin Usage-rect', // 节点文本properties: { // 自定义属性，用于存储需要这个节点携带的信息，可以传入宽高以重设节点的宽高width: 160,height: 80,}},{id: '50',type: 'circle',x: 300,y: 300,text: 'Origin Usage-circle',properties: {r: 60,}},],// 边数据edges: [{id: 'rect-2-circle', // 边ID，性质与节点ID一样type: 'polyline', // 边类型sourceNodeId: '50', // 起始节点IdtargetNodeId: '21', // 目标节点Id},],
}

效果如下：

请添加图片描述

二、插件安装使用

如果需要使用插件，开发者需要引入@logicflow/extension依赖包，并根据自己的诉求引入插件。

主要使用的插件提供了放大缩小或者自适应画布的能力，同时也内置了 redo 和 undo 的功能。

使用npm安装后如下引用：

import LogicFlow from "@logicflow/core";
import { Control } from "@logicflow/extension";// 全局使用 每一个lf实例都具备 Control
LogicFlow.use(Control);

效果如下：

请添加图片描述

三、自定义节点

LogicFlow提供了7种类型的节点供继承之后进行重写，这边主要讲解html节点的自定义，因为html节点的可定制性比较高。

自定义节点需要返回三个东西，view、model和type。

1、view重写

继承HtmlNode，重写setHtml方法。这边Component是定义在同文件中的vue组件，可以直接导入一个开发好的组件，这个组件即节点的最终样式。

class CustomNode extends HtmlNode {setHtml(rootEl: any) {const { properties } = this.props.model;const node = document.createElement('div');node.className = 'logic-flow-node-customnode';render(<Component properties={properties} props={this.props} key={new Date().getTime()} />,node,);rootEl.innerHTML = '';rootEl.appendChild(node);}
}

2、model重写

继承HtmlNodeModel，重写setAttributes方法。

class NodeModel extends HtmlNodeModel {setAttributes() {// this.draggable = falsethis.width = NODE_WIDTH;this.height = 120;this.text.editable = false;}
}

3、导出属性

export default {type: 'custom-node-mc',view: CustomNode,model: NodeModel,
};

4、注册自定义节点

在创建实例的地方导入自定义的节点，并通过this.lf.batchRegister批量注册。注册后的节点，就可以addNode函数增添节点，在type中填入自定义的type即可。

LogicFlow-前端流程图开发

LogicFlow-前端流程图开发一、安装使用 1、安装logicflow 通过npm安装logicflow npm install logicflow/core --save# 插件包（不使用插件时不需要引入） npm install logicflow/extension --save2、创建实例 import LogicFlow from "logicflow/…...

编程日记 2025/8/25 23:46:51

第四讲：类与对象（下）

目录 1、再谈构造函数 1.1、构造函数体赋值 1.2、初始化列表 1.3、explicit关键字 2、static成员 3、友元 3.1、友元函数 3.2、友元类 4、内部类 5、匿名对象 6、拷贝对象时的优化（了解） 7、重新理解类与对象 8、日期类的实现 9、练习题 9…...

编程日记 2025/8/22 9:33:40

ReAct 框架 | 提示词工程（1）

ReAct 框架 1、什么是 ReAct 框架？2、基于 ReAct 框架的提示词3、结合 LangChain 框架使用4、总结 1、什么是 ReAct 框架？ ReAct ： Reasoning Acting ，将推理与外部工具调用结合，通过交互式探索解决复杂问题。优点…...

编程日记 2025/8/25 13:03:19

第一部分——Docker篇第一章 Docker容器

关于系统的改造探索开篇：系统改造的调研报告第一部分——Docker篇第一章 Docker容器第二章 Docker安装第三章构建自定义镜像第四章搭建镜像仓库第五章容器编排第六章容器监控文章目录关于系统的改造探索第一部分——Docker篇前言一、就是你了——…...

编程日记 2025/8/25 23:46:50

在此目录下，开启命令行 /home/kt/react 如下操作 tkt4028:~/react$ npm create vitelatest task-manager -- --template react Need to install the following packages: create-vite6.3.1 Ok to proceed? (y) y> npx > cva task-manager --template react…...

编程日记 2025/8/25 23:46:50

AR 赋能儿童娱乐：剧本杀与寻宝小程序搭建秘籍

在科技飞速发展的当下，儿童娱乐领域正经历着一场创新变革。AR（增强现实）技术的融入，为儿童剧本杀与寻宝游戏带来了前所未有的沉浸式体验。通过搭建专属小程序，孩子们能够在虚拟与现实交织的世界中开启奇幻冒险。接下来…...

编程日记 2025/8/25 23:45:07

2017年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析

2017年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析全国大学生数学建模竞赛（China Undergraduate Mathematical Contest in Modeling）是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动，目的在于激励学生学习数学的积极性，提高学…...

编程日记 2025/8/25 16:47:14

密码学基础——分组密码的运行模式

前面的文章中文我们已经知道了分组密码是一种对称密钥密码体制，其工作原理可以概括为将明文消息分割成固定长度的分组，然后对每个分组分别进行加密处理。下面介绍分组密码的运行模式 1.电码本模式（ECB） 2.密码分组链接模式&…...

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

zk源码—2.通信协议和客户端原理一

大纲 1.ZooKeeper如何进行序列化 2.深入分析Jute的底层实现原理 3.ZooKeeper的网络通信协议详解 4.客户端的核心组件和初始化过程 5.客户端核心组件HostProvider 6.客户端核心组件ClientCnxn 7.客户端工作原理之会话创建过程 1.ZooKeeper如何进行序列化 (1)什么是序列化…...

编程日记 2025/8/25 23:44:37

【NLP】Transformer网络结构（2）

一、Transformer 整体架构 Transformer 由 Encoder 和 Decoder 堆叠组成，每个 Encoder/Decoder 层包含以下核心模块： Encoder 层：Multi-Head Self-Attention → Add & LayerNorm → Feed-Forward → Add & LayerNormDecoder 层&…...

编程日记 2025/8/25 23:45:53

【LeetCode77】组合

题目描述给定区间 [1, n] 和一个整数 k，需要返回所有可能的 k 个数的组合。思路算法选择：回溯算法回溯算法是一种试探性搜索方法，非常适合用来解决组合问题。基本思想是： 从数字 1 开始，逐步构建组合。当当前组…...

编程日记 2025/8/25 23:44:33

1631. 最小体力消耗路径

文章目录题意思路代码题意题目链接思路搜索代码 class Solution { public:int minimumEffortPath(vector<vector<int>>& heights) {int m heights.size();int n heights[0].size();int x_add[] {0, 0, 1, -1};int y_add[] {1, -1, 0, 0};if (m …...

编程日记 2025/8/25 23:46:51

时间复杂度和空间复杂度

🌟 各位看官好，我是maomi_9526！ 🌍 种一棵树最好是十年前，其次是现在！ 🚀 今天来学习C语言的相关知识。 👍 如果觉得这篇文章有帮助，欢迎您一键三连，分享给更…...

编程日记 2025/8/22 21:23:02

Python基于OpenCV和SVM实现中文车牌识别系统GUI界面

说明：这是一个系统实战项目，如需项目代码可以直接到文章最后关注获取。项目背景随着智能交通系统和智慧城市的发展，车牌识别技术在车辆管理、交通监控、停车场收费等领域发挥着重要作用。传统的车牌识别系统主要针对英文和数字的识别&…...

编程日记 2025/8/25 23:44:34

用AbortController取消事件绑定

视频教程 React - 🤔 Abort Controller 到底是什么神仙玩意？看完这个视频你就明白了！💡_哔哩哔哩_bilibili AbortController的好处之一是事件绑定的函数已无需具名函数,匿名函数也可以被取消事件绑定了 //该代码2秒后点击失效…...

编程日记 2025/8/20 4:54:42

4月7日随笔

晚饭塔斯汀下了晚自习买了一瓶百香果rio 还有一块五毛钱的老酸奶，这个糖吃的时候是真开心呀英语课互动感觉越来越少了，我甚至看了十分钟的小排球解析几何和微积分都听不进去了。就算坐在第三排还是会走神。但是不知道为什么我刷视频和打游戏的时…...

编程日记 2025/8/25 15:16:39

Android使用声网SDK实现音视频互动(RTC)功能

一、前期准备 1、注册声网账号声网官网 2、创建项目拿到AppID，主要证书二、代码部分先上一下官方提供的demo地址： Agora-RTC-QuickStart: 此仓库包含 Agora RTC Native SDK 的QuickStart示例项目。 - Gitee.comhttps://gitee.com/agoraio-comm…...

编程日记 2025/8/25 2:44:09

【go】slice的浅拷贝和深拷贝

浅拷贝(Shallow Copy) 浅拷贝是指只复制切片本身的结构（指针、长度和容量），而不复制底层数组的元素。实现方式直接赋值： slice1 : []int{1, 2, 3} slice2 : slice1 // 浅拷贝切片操作： slice1 : []int{1, 2, 3} s…...

编程日记 2025/8/25 23:45:53

哑铃图：让数据对比一目了然【Dumbbell Chart】

没错，当我祭出 “哑铃” 阵列，你当如何破解，哈哈哈哈…此时，你可以适当怀疑笔者的精神状态了。但话说回来，如果稍加想象，把上图竖起来，“大致” 就是我要分享的 “哑铃图” 了。😑 …...

编程日记 2025/8/20 1:36:59

Spring Boot 集成 MongoDB 时自动创建的核心 Bean 的详细说明及表格总结

以下是 Spring Boot 集成 MongoDB 时自动创建的核心 Bean 的详细说明及表格总结： 核心 Bean 列表及详细说明 1. MongoClient 类型：com.mongodb.client.MongoClient作用： MongoDB 客户端核心接口，负责与 MongoDB 服务器建立连接、…...

编程日记 2025/8/21 8:08:44

水产养殖水下监控无人机推荐-P200PRO

水产养殖水下监控无人机推荐 | 潜鲛 P200 PRO：您的“水下管家”，养鱼增产、降本增效的终极利器！ ——上海棕航电子科技，用技术守护每一方鱼塘一、水产养殖的痛点：看不见的水下，才是赚钱的关键 …...

编程日记 2025/8/25 23:45:52

数据结构与算法-数学-基础数学算法（筛质数，最大公约数，最小公倍数，质因数算法，快速幂，乘法逆元，欧拉函数）

一：筛质数： 1-埃氏筛法该算法核心是从 2 开始，把每个质数的倍数标记为合数，时间复杂度约为 O(nloglogn)。 #include <iostream> #include <vector>u sing namespace std; const int N 1000010; bool st[N]; …...

编程日记 2025/8/25 9:21:31

elasticSearch-搜索引擎

搜索引擎的优势有了数据库分页查询，为什么还需要搜索引擎？ 搜索引擎速度上很快数据库分页查询，随着数据库数据量增大，页数靠后，会导致搜索速度变慢，但是搜索引擎不会搜索引擎支持分词查询，地…...

编程日记 2025/8/21 8:24:32

MQTT-Dashboard-数据集成

sink [sɪŋk] 下沉；沉没；沉降；...

编程日记 2025/8/23 13:54:16

uni-app项目运行在浏览器、微信开发者工具、mumu模拟器

一、安装HBuilder X 1、下载HBuilder X 官网网址：https://dcloud.io/hbuilderx.html 根据电脑系统下载对应的版本（我的电脑是Windows 10） 2.安装HBuilder X 直接将HBuilderX.4.61.2025040322-alpha.zip解压到自己想要存放的文件夹中双击…...

编程日记 2025/8/25 1:03:36

从零开始微调Embedding模型：基于BERT的实战教程

文章目录背景微调实战装包介绍项目文件介绍微调硬件配置要求 debug 重要代码分析【选看】资源分享参考资料背景在理解与学会了Naive RAG的框架流程后，就很自然地关注到embedding模型，与问题相关的文本召回，也有很多论文在做这方面的创新…...

编程日记 2025/8/24 12:34:10

机器学习（神经网络基础篇）——个人理解篇5(梯度下降中遇到的问题)

在神经网络训练中，计算参数的梯度是关键步骤。numerical_gradient 方法旨在通过数值微分（中心差分法）计算损失函数对网络参数的梯度。然而，该方法的实现存在一个关键问题，导致梯度计算错误。 1、错误代码示例&#xf…...

编程日记 2025/8/25 23:44:34

带label的3D饼图（threejs)

3D饼图使用three.js实现，选择threejs的原因：label需要实际的显示在具体的饼对应的模块上 “three”: “^0.127.0”, <template><div><div ref"chartContainer" class"chart-container"></div><div clas…...

编程日记 2025/8/21 2:41:54

ragflow开启https访问:使用自签证书还是有不安全警告,如何解决

背景:在ragflow里的使用了自签证书来启动ragflow,在浏览器里访问还是不安全警告,如何解决在方案2中，证书不会在访问网站时自动下载，需要你手动获取并安装证书文件。以下是具体操作步骤：详细步骤：手动获取并安装自签名证书第一步：获取证书文件找到证书文件证书文件位…...

编程日记 2025/8/25 19:12:13

条件变量核心要素

条件变量内部实现原理原子性解锁阻塞机制： // pthread_cond_wait内部伪代码大致如下： int pthread_cond_wait(cond_t *cond, mutex_t *mutex) {atomic {unlock(mutex); // 原子操作中先释放互斥锁block_thread(); // 立即将线程加入等待队列…...

编程日记 2025/8/19 20:13:54

C语言求鞍点

我们先在第一行中找出最大的值，然后在该列中找出最小值看这两个是否相等。若是相等，那么这个数就是鞍点跳出循环若是不想等，则继续在下一行寻找，若是一直到整体的循环都结束了还是没有，那么不存在鞍点。运行结果:…...

编程日记 2025/8/18 0:31:57

XELA机器人多种“形态和玩法”的Uskin磁性阵列式三轴触觉传感器，你使用过了吗？

XELA Robotics为机器人行业提供创新的磁性触觉传感技术，uSkin触觉传感器是一种高密度的三轴触觉传感器，因其轻薄、表面柔软耐用和布线少的结构设计，可以轻松集成到机器人本体，灵巧手，机器人夹爪等部位，使机…...

编程日记 2025/8/17 22:18:49

转换效率高达 96%，12V转5V同步降压WD5030

特点1 宽输入电压范围：能在 7V 至 30V 的宽输入电压范围内工作，可适应多种不同电压等级的供电环境，无论是工业设备中的较高电压输入，还是便携式设备经过初步升压后的电压，都能良好适配，极大地拓展了应用的…...

编程日记 2025/8/25 20:25:53

请你回答一下单元测试、集成测试、系统测试、验收测试、回归测试这几步中最重要的是哪一步？

在软件测试的不同阶段中，每个环节都有其不可替代的价值，但若从工程效率和缺陷防控的全局视角来看，单元测试（Unit Testing）是质量金字塔的基石，其重要性最为关键。以下是分层解析：一、从缺陷修复成本看优先级美国国家标准与技术研究院（NIST）研究显示：单元测试阶段…...

编程日记 2025/8/24 11:20:27

QML和C++交互

目录 1 QML与C交互基础1.1 全局属性1.2 属性私有化(提供接口访问) 2 QT与C交互（C创建自定义对象，qml文件直接访问）3 QT与C交互（qml直接访问C中的函数）4 QT与C交互（qml端发送信号 C端实现槽函数）…...

编程日记 2025/8/20 7:40:22

2021年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析

2021年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析全国大学生数学建模竞赛（China Undergraduate Mathematical Contest in Modeling）是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动，目的在于激励学生学习数学的积极性，提高学…...

编程日记 2025/8/25 8:58:59

mariadb使用docker compose方式安装

问题本地mac m1上面的mysql和mariadb突然不用使用了，重新安装也不想，最近mac系统也更新了，brew也更新了，重新安装mariadb还是不能正常使用，现在我打算使用docker来安装本地的mariadb了。默认配置文件my.cnf 从容器…...

编程日记 2025/8/23 10:56:21

Logo语言的死锁

Logo语言的死锁现象研究引言在计算机科学中，死锁是一个重要的研究课题，尤其是在并发编程中。它指的是两个或多个进程因争夺资源而造成的一种永久等待状态。在编程语言的设计与实现中，如何避免死锁成为了优化系统性能和提高程序可靠性的关…...

编程日记 2025/8/20 5:42:34

具身智能零碎知识点（一）：深入解析Transformer位置编码

深入解析Transformer位置编码 Transformer位置编码完全解析：从公式到计算的终极指南一、位置编码的必要性演示二、位置编码公式深度拆解原始公式参数说明（以d_model4为例） 三、完整计算过程演示步骤1：计算频率因子步骤2&#xff1…...

编程日记 2025/8/22 5:11:55

0201概述-机器学习-人工智能

文章目录 1、概述1.1、示例1.2、概念 2、应用场景2.1、行业应用场景2.1.1、金融领域2.1.2、医疗健康2.1.3、零售与电商2.1.4、制造业2.1.5、自动驾驶 2.2、功能场景分类2.2.1、预测类2.2.2、分类与识别类2.2.3、生成与优化类 2.3、机器学习适用场景的共同特征 3、实现机器学…...

编程日记 2025/8/20 13:05:35

金能电力工具柜：“五世同堂”演绎创新华章

在电力与工业领域的浩瀚星空中，金能电力如同一颗璀璨的星辰，其工具柜产品更是经历了五代更迭，如同家族中的“五世同堂”，每一代都承载着前人的智慧与后人的创新，共同谱写着传承与创新的交响曲。初识平凡：普…...

编程日记 2025/8/21 16:32:51

蓝桥杯每日刷题c++

目录 P9240 [蓝桥杯 2023 省 B] 冶炼金属 - 洛谷 (luogu.com.cn) P8748 [蓝桥杯 2021 省 B] 时间显示 - 洛谷 (luogu.com.cn) P10900 [蓝桥杯 2024 省 C] 数字诗意 - 洛谷 (luogu.com.cn) P10424 [蓝桥杯 2024 省 B] 好数 - 洛谷 (luogu.com.cn) P8754 [蓝桥杯 2021 省 AB2…...

编程日记 2025/8/22 7:49:45

MySQL基础 [五] - 表的增删查改

目录 Create（insert） Retrieve（select） where条件编辑 NULL的查询结果排序(order by) 筛选分页结果 (limit) Update Delete 删除表截断表（truncate） 插入查询结果（insertselect&…...

编程日记 2025/8/21 16:43:12

深入解析 MySQL 中的日期时间函数：DATE_FORMAT 与时间查询优化

深入解析 MySQL 中的日期时间函数：DATE_FORMAT 与时间查询优化在数据库管理和应用开发中，日期和时间的处理是不可或缺的一部分。MySQL 提供了多种日期和时间函数来满足不同的需求，其中DATE_FORMAT函数以其强大的日期格式化能力，…...

编程日记 2025/8/22 5:12:01

GPU是什么？与 FPGA 有何关联

前段时间，AMD 和英伟达相继接到通知将对我国断供高端 GPU 芯片，很多人这才意识到 GPU 的战略价值。那么 GPU 究竟是什么？它为何如此重要？今天就由宸极教育带大家一起了解 GPU 的核心地位，以及它与国产FPGA发展的关系…...

编程日记 2025/8/17 22:16:47

数据结构与算法：基础与进阶

编程日记 2025/8/18 0:46:09

低配置云服务器网站的高效防御攻略

在网络环境日益复杂的当下，低配置云服务器网站常面临攻击威胁。不少站长疑惑，明明设置了 CC 防御，服务器却依旧不堪一击，这是怎么回事呢？ 比如，在 CC 防御配置中，设定 10 秒内允许访问 50 次。但…...

编程日记 2025/8/21 2:41:39

使用 Lua 脚本高效查询 Redis 键的内存占用

使用 Lua 脚本高效查询 Redis 键的内存占用在处理 Redis 数据时，我们常常需要了解某些键的内存占用情况，尤其是在优化内存使用或排查问题时。虽然 Redis 提供了MEMORY USAGE命令来查询单个键的内存占用，但如果需要批量查询多个键&#xff0…...

编程日记 2025/8/22 2:27:54

【Linux篇】基础IO - 揭秘重定向与缓冲区的管理机制

📌 个人主页： 孙同学_ 🔧 文章专栏：Liunx 💡 关注我，分享经验，助你少走弯路！ 文章目录一. 理解重定向1.1 理解重定向1.2 dup21.3 进一步理解重定向输出重定向：追加重定向…...

编程日记 2025/8/20 19:24:25

centos 8 启动Elasticsearch的时候报内存不足问题解决办法

centos 8 启动Elasticsearch 的时候报错，导致无法启动Elasticsearch 。 [root@CentOS-8 ~]# journalctl -xe Apr 07 18:25:56 CentOS-8.0 kernel: [ 8754] 0 8754 3180 63 69632 0 0 sh Apr 07 18:25:56 CentOS-8.0 kernel: [ 8755] 0 8755 3180 64 69632 0 0 sh Apr 07 18:25…...

编程日记 2025/8/17 9:38:34

LogicFlow-前端流程图开发

一、安装使用

1、安装logicflow

2、创建实例

二、插件安装使用

三、自定义节点

1、view重写

2、model重写

3、导出属性

4、注册自定义节点

相关文章：