前端实现可拖拽流程的js框架

vue3流程图组件vue flow使用 vue3流程图组件、vue flow、typescript 阅读详情
AI摘要

本文介绍了多个用于创建流程图、DAG图、ER图等的图形编辑框架和库,包括AntV的X6和XFlow,适用于React技术栈的高效解决方案;jsplumb,提供开源和收费版本;flowchart.js,用于绘制SVG流程图;bpmn-js,专注于BPMN2.0流程设计;LogicFlow,支持多种逻辑编排场景;flow-eda,用于事件驱动的低代码编程;vue-super-flow,Vue.js流程图组件;GoJS和JointJS则为收费选项。

1 AntV

X6 是 AntV 旗下的图编辑引擎,提供了一系列开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建 DAG 图、ER 图、流程图等应用。

XFlow是基于 X6 图编辑引擎、面向 React 技术栈用户的专业图编辑应用级解决方案, 帮助您轻松开发复杂的图编辑应用。目前已经在蚂蚁大数据/人工智能场景中深度打磨验证

# AntV首页,关注 X6 | XFlow
https://antv.vision/zh

# 样例
https://x6.antv.vision/apps/dag/

# X6
https://x6.antv.vision/zh


# XFlow
https://xflow.antv.vision/zh-CN/

在这里插入图片描述

2 jsplumb

有收费版和社区版(开源)两个版本。

大神中文地址:https://wdd.js.org/jsplumb-chinese-tutorial/#/

大神中文GitHub地址:https://github.com/wangduanduan/jsplumb-chinese-tutorial

社区版官方社区文档(2.X):https://docs.jsplumbtoolkit.com/community-2.x/current/

项目Github地址: https://github.com/jsplumb/jsplumb

在这里插入图片描述

3 flowchart.js

从图表的文本表示中绘制简单的SVG流程图

# 参考网址
http://flowchart.js.org/

在这里插入图片描述

4 bpmn-js

bpmn-js是一个BPMN 2.0渲染工具,前端可以利用这个流程设计器,设计流程。

# 网站
https://bpmn.io/toolkit/bpmn-js/

在这里插入图片描述

5 LogicFlow

LogicFlow 是一款流程图编辑框架,提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端研发自定义开发各种逻辑编排场景,如流程图、ER图、BPMN流程等。

# 参考网址
http://logic-flow.org/

在这里插入图片描述

6 flow-eda

flow-eda 项目是一种基于事件驱动的流式低代码编程应用程序,它的主要功能是采用可视化编程,以拖拽节点、连接组合节点的形式来完成流程绘制,达到低代码开发和实现业务编程的目的。

https://gitee.com/Linxff/flow-eda

在这里插入图片描述

7 vue-super-flow

Vue-super-flow 是基于vue 开发的一款生成、预览流程图的组件。使用者可以根据不同的需求对图、节点、连线进行细致的控制。

# 参考网址 
https://caohuatao.github.io/guide

在这里插入图片描述

8 GoJS

收费

# 参考网址
https://gojs.net/latest/index.html

在这里插入图片描述

9 JointJS

收费

https://www.jointjs.com/

在这里插入图片描述

前端绘制流程图、泳道图 使用magicFlow插件绘制。原生HTML页面也可以,vue或react前端框架也可以,官网有详细安装方法,本文章后面也会详细说明。 阅读详情

相关推荐

前端流程图框架11个:开发组态图、思维导图、拓扑图必备

具体实现流程图的方式和工具可以根据具体需求选择,可以使用原生的 HTML、CSS 和 JavaScript 进行开发,也可以使用流程图框架来简化开发过程。流程图框架通常会提供一些封装好的组件和 API,使开发者可以更方便地创建和操作流程图。总之,前端流程图框架为组态图、拓扑图和结构图的开发提供了方便、高效和灵活的工具和功能,可以帮助开发者快速构建和定制各种类型的图形,提升用户体验和开发效率。这里面最核心的还是JavaScript,网上有很多开源的js框架,我们拿来即用就可以,无需从头开始。

m0_67403143的博客 1427

【web前端】bootstrap自适应定制,拖拽布局,一键生成页面

这里将介绍整个guiplan开发工具的使用以及前端布局的基础教程。常用的基本操作,如div操作,文字操作,图片操作,组件操作,生成html网页,保存html,css代码。通过拖拽,点击,快捷键等方式轻松绘制想要的静态页面。利用bootstrap框架进行自适应的定制,以及常用弹性盒子布局方式。零基础即可学会网页绘制。软件自动生成的代码也可以手动修改,方便进一步学习与了解前端知识。生成的代码符合w3c规范,也可进行二次开发。这节课讲解的是基本布局教程,不涉及到vue交互。设计师与产品经理也可以用此软件开始制作原型。

前端拖拽事件解析-react实现拖拽效果demo

前言 在平时开发中会有一些涉及到通过拖拽效果完成的业务需求,那么我们就需要了解和学习拖拽相关的知识,在html5中就有原生的拖拽api,下面就来使用这些api实现一个灵活拖拽的demo。 拖拽流程 简单来说完成拖拽一共需要三步: 开始拖拽 -> 拖拽中 -> 结束拖拽。 在这些步骤中又会有许多更细节的步骤需要处理,完整流程如下: 1、设置指定元素为可拖拽元素(使用draggable属性,只有设置了draggable属性,元素才可以被拖动) 2、点击拖拽元素开始进行拖拽并监听拖拽开始事件(设置拖拽

前端三脚猫的博客 5317

前端流程图插件对比选型,这一篇就够了

大厂技术高级前端Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群前言大家好,我是考拉????。Snipaste_2023-07-04_15-49-12.png前端领域有多种流程库可供选择,包括但不限于vue-flow、butterfly、JointJS、AntV G6、jsPlumb和Flowchart.js。这些库都提供了用于创建流程图、图形编辑和交互的功能。然而...

程序员成长指北 8630

轻量级JS流程图工具包:含自定义节点、分组拖拽、键盘快捷操作与增量保存功能

GooFlow是一套开箱即用的纯前端JavaScript流程图编辑解决方案,不依赖Flash或服务端渲染,兼容IE7+及所有主流现代浏览器。它通过JSON格式驱动图表结构,前后端完全解耦,后端只需按约定返回或接收JSON数据即可完成加载与保存,适配PHP、Java、Python、.NET等任意语言。支持顶部菜单与左侧工具栏灵活配置,可一键切换为只读查看模式;提供直线/折线连接、区域分组框、进度色块标注、双击编辑文本、节点类型动态切换(如round圆形节点、mix复合节点)及CSS类自由绑定。所有图形元素的操

white的博客 225

JavaScript实现网页鼠标拖拽效果实战详解

鼠标拖拽的本质是通过监听一系列鼠标事件,实现用户对DOM元素的“抓取—移动—释放”交互。其核心依赖三个关键事件:mousedown触发拖拽起点,mousemove实时追踪位置变化,mouseup终止操作。这三个事件协同工作,构成完整的拖拽生命周期。

weixin_42298164的博客 1469

Nodejs express、html5实现拖拽上传(转载)

一、前言 文件上传是一 个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传。给用户体验带来很大问题。html5开始支持拖 拽上传的需要的api。nodejs也是一个最近越来越流行的技术,这也是自己第一次接触nodejs,在nodejs开发中,最常用的开发框架之一是 expess,它是一个类似mvc模式的框架。结合html5、nodejs...

weixin_30415801的博客 193

一个非常好用的前端框架,拖拽复制就能用

一个非常好用的前端框架,拖拽复制就能用,包含各种报表、列表、菜单、登录、注册、搜索、图表、…………

如何快速构建React拖拽编辑器:Craft.js的完整指南

Craft.js是一个强大的React框架,专为构建可扩展的拖拽页面编辑器而设计。它提供了直观的拖放界面、灵活的组件系统和丰富的编辑功能,让开发者能够轻松创建出专业的页面编辑工具。无论是构建网站编辑器、CMS系统还是低代码平台,Craft.js都能为你提供坚实的技术基础。 ## Craft.js编辑器界面概览 Craft.js的核心优势在于其直观的可视化编辑体验。通过以下界面截图,我们可以看到

gitblog_00347的博客 1032

CentOS 7下Oracle 11G RAC静默安装避坑指南:从网络规划到共享存储配置全流程

本文详细介绍了在CentOS 7环境下进行Oracle 11G RAC静默安装的全流程,包括网络规划、共享存储配置和系统参数调优等关键步骤。特别针对静默安装过程中的常见问题提供了实用的避坑指南和优化建议,帮助技术人员高效完成企业级数据库部署。

weixin_29234509的博客 124

kettle9.0+ 连接Hadoop报错

kettle bug

x²+(y-√³x²)²=1的博客 1559

Squarespace 前端面试实战指南:实时 Bug 修复技术面与看板(Kanban)系统设计的完整准备方案

本文基于 Front End Interview Handbook 仓库中的 [Squarespace 前端面试真题指南](https://link.gitcode.com/i/83d81f3427b3aabb014e423e53df682f),系统拆解 Squarespace 前端岗位目前的两类核心考核:一场以"现场 Debug 有 bug 的类式(class-based)JavaScript

gitblog_00338的博客 640

Python与西门子PLC数据交互实战:基于Snap7的跨平台工业通信指南

本文详细介绍了如何使用Python和Snap7库实现与西门子PLC的数据交互。内容涵盖跨平台环境搭建、连接参数配置、数据读写实战及性能优化技巧,为工业自动化、数据采集和智能制造场景提供了一套轻量、灵活且高效的通信解决方案。

vim8coder的博客 285

interact.js 前端拖拽插件

interact.js 是一款轻量且功能强大的 JavaScript 拖拽交互库,核心用于实现元素的拖拽、缩放、旋转等交互式操作。

0.0的博客 1170

delphi android发送与接收广播

在发送广播时,使用`SendBroadcast`函数,并传入广播的Action。在接收广播时,创建一个继承自`TAndroidBroadcastReceiver`的类,并在`onReceive`方法中处理接收到的广播。然后,使用`RegisterBroadcastReceiver`函数注册广播接收器,并在`UnregisterBroadcastReceiver`函数中取消注册。请注意替换示例代码中的`YOUR_ACTION`为实际的广播Action。// 处理接收到的广播。

GuoGuoABC 1207

CVPR2021 CenterPoint源码解读:从VoxelNet到两阶段优化的完整实现细节

本文深度解析了CVPR 2021 CenterPoint模型的完整实现细节,从VoxelNet体素化、稀疏卷积Backbone,到基于中心点的检测头与两阶段精修机制。文章提供了从环境搭建、数据预处理到核心代码模块(如热力图生成、关键点特征提取与MLP Refiner)的实战指南,并分享了训练策略、多任务损失调优及可视化调试等关键工程实践,助力开发者深入理解并复现这一高效的3D目标检测框架。

linux的博客 470

前端拖拽排序实现详解:从原理到实践 - 附完整代码

在我们前端开发过程中经常会用到排序的功能,其中列表项的拖拽排序(Drag-and-Drop Sortable)不仅能让用户直观、高效地调整顺序,还能大幅提升交互体验。无论是管理后台的菜单排序、看板(Kanban)中任务卡片的调整,还是移动端的图片/视频重排,拖拽排序都是不可或缺的交互模式

Micro麦可乐的博客 1万+

BCIC IV 2a数据集实战:从MATLAB导入到EEG信号分析全流程

本文提供了BCIC IV 2a数据集从MATLAB导入到EEG信号分析的完整实战流程。详细解析了数据集结构,区分了EEG与EOG信号,并演示了信号可视化、基础预处理(滤波、分段、基线校正)等关键步骤,帮助脑机接口研究者快速上手处理这一经典运动想象数据集。

weixin_29047919的博客 469

前端面试:前端两个 dom 元素是可以拖拽的, 要实现两个 dom 之间的连接线,如何实现?

当用户拖动其中一个元素时,连接线会自动更新位置,提供了直观的连接效果。在前端开发中,实现两个可拖拽的 DOM 元素之间连接线的功能通常涉及到以下几个步骤:设置可拖拽元素、计算连接线的起始和结束位置,并在这些位置之间绘制连线。// 清空 canvas。/* 让 canvas 不阻止鼠标事件 */// 设置 canvas 的宽高为窗口的宽高。// 计算元素在页面上的绝对位置。// 初始绘制连接线。

m0_67537062的博客 1354

planning模块(6)-参考线的平滑(二次规划)

上一篇已经介绍了采样点生成锚点数据的过程,并且将所有采样点生成的锚点数据设置到了平滑器中.接下来继续介绍使用二次规划平滑参考线的算法过程.从锚点数据中提取坐标存入raw_point2d,提取横向边界存入anchorpoints_lateralbound,将起点和终点的横向边界设置为0,防止车在起点和终点位置偏离车道中心线.

让复杂的问题变得更容易理解 787

硬件知识点-----SPI串联电阻、振铃、过冲

电阻取值,没有公式,一被传输线的特征阻抗为50欧姆左右,而TTL电路输出电阻大桃为13欧姆左右,在源端串一个33姆,大致和50相当,这样就可以柳制从终端反射回来的倍号,防止再次反射。传输时间tp=L/V,其中L是导线长度,V是电磁波在电路板中的传输速度V=C/sqrDk,其中Dk是光速衰减因子,对于电路板而言是铜线,Dk=4电磁波在电路板中的速度都是慢于光速的。实际上串联多大的电阻与传输线的阻抗有关,为了保证阻抗的连续性,如果传输线的特性阻抗 Z0与驱动源的输出阻抗 Zd不匹配,会引发信号的反射。

贾saisai的博客 2719

前端可拖拽流程框架设计:从核心引擎到实战优化

在低代码平台和可视化搭建领域,前端图形化编排是核心技术之一。其原理在于通过分层架构(核心引擎、渲染适配层、插件生态)解耦数据模型与视图渲染,实现高效的状态管理与用户交互。这种设计的技术价值在于提供了声明式API与丰富的生命周期钩子,将复杂的拖拽、连线计算等底层逻辑封装,使开发者能专注于业务节点与数据流转。应用场景广泛覆盖OA审批流、数据ETL流程设计、工作流配置及思维导图等需要节点与连线可视化编排的领域。本文深入探讨了如何构建一个轻量、灵活的可拖拽流程框架,并重点解析了其高性能拖拽优化与智能连线(如基于网格

weixin_34293246的博客 470

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

只用几行代码,不依赖任何框架?SMTFlow 轻松实现前端流程图

SMTFlow 是一款基于纯 JavaScript 开发的轻量级流程图设计工具。它无需任何第三方库的支持,支持主流浏览器,适合用于各类Web应用场景。无论是管理系统、项目流程图,还是简单的图形设计任务,SMTFlow 都能提供一个灵活且高效的解决方案。项目开源托管在 Gitee,并且拥有MIT 开源许可证,开发者可以自由使用和修改。总的来说,SMTFlow 是一个功能强大且简单易用的前端流程图设计工具,特别适合需要快速构建流程图的开发者。如果你在寻找一款无需依赖库支持跨浏览器。

brizer的博客 1559

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

vue + gojs 实现拖拽流程图(实战项目)

在项目开发一期的时候我用的不是go.js,而用的是一款轻便的流程插件jsplumb.js,它也集成了各种功能性API,但是在开发二期的时候它的内部功能已经满足不了需求了,所以我就开始在网上查找流程插件,看了很多插件,比如:G6,D3 等这些可视化流程插件都是不能满足需求。一、首先,看到效果图里的内置多点和其他模块单点连线问题,其他插件是无法这个满足需求的,可能我没有深入去了解其他的流程插件吧,但是go.js里内置点连线可以让开发者很快的理解代码逻辑,不用耗费大量的时间去想点与点的连线。

qq_279364752的博客 9987

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

vue可拖拽流程图

支持元素节点有图形面板区拖拽至主画布,拖拽调整元素位置,拖拽调整元素大小 支持通过拖拽形式进行节点间连线,可控的节点连接桩,以及对已有连线拖拽调整连线位置 支持缩略图 支持键盘快捷键监听,例如Del BackPlace ctrl等按键以及组合键 支持流程编辑操作的撤销,重做,清空,保存图数据,读取数据后渲染图 支持鼠标悬停,点击,单选,框选元素,以及触发相关事件 支持监听流程图窗口尺寸变化,以便调整画布尺寸。(3)基于vue2.x+antv x6实现可拖拽编辑拓流程拓扑图。

weixin_64824339的博客 3848
上一篇: Linux中文本处理命令
下一篇: Flask简单调用Redis、MySQL和生成token及token验证
MasonYyp
博客等级 码龄9年 301粉丝 297原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值