Advertisement

简易流程设计工具:基于Vue和JsPlumb的流程设计器

  •  5星
  •     浏览量: 0
  •     大小:None
  •      文件类型:None


简介:
这是一款采用Vue框架与JsPlumb技术开发的简便流程设计软件,用户可以轻松创建、编辑及管理各类业务流程图。 easy-flow 是一个基于 Vue 和 ElementUI 的流程设计器,并使用 JsPlumb 来实现连线功能以及通过 vuedraggable 插件来支持节点的拖拽操作。 其主要特性包括: - 支持用户通过点击线条设置条件。 - 允许根据给定的数据加载流程图。 - 提供画布上的自由拖动能力,以适应不同的设计需求。 - 用户可以自定义连线样式、锚点和类型等属性来满足个性化的设计要求。 近期更新日志如下: 2020年11月12日: 增加了力导图的自动布局功能。用户只需提供节点信息以及它们之间的关系,系统即可根据这些数据智能地计算出合理的坐标位置。 2020年8月6日: 新增了自连接样例和缩放功能(虽然可能存在一些问题),同时添加了使用说明文档以帮助新用户更好地理解和操作。 另外还增加了拖拽回调节点的功能,并引入了一个名为“viewOnly”的参数,允许开发者控制某个特定的流程节点是否处于只读状态。 2020年6月14日: 新增功能包括对连线类型的自定义、锚点的选择以及样式的设计等特性。这些改进进一步增强了设计者在构建复杂业务逻辑时的灵活性和自由度。 2020年5月10日: 修改了部分JS代码,以提升系统的稳定性和用户体验。

全部评论 (0)

还没有任何评论哟~
客服
客服
  • VueJsPlumb
    优质
    这是一款采用Vue框架与JsPlumb技术开发的简便流程设计软件,用户可以轻松创建、编辑及管理各类业务流程图。 easy-flow 是一个基于 Vue 和 ElementUI 的流程设计器,并使用 JsPlumb 来实现连线功能以及通过 vuedraggable 插件来支持节点的拖拽操作。 其主要特性包括: - 支持用户通过点击线条设置条件。 - 允许根据给定的数据加载流程图。 - 提供画布上的自由拖动能力,以适应不同的设计需求。 - 用户可以自定义连线样式、锚点和类型等属性来满足个性化的设计要求。 近期更新日志如下: 2020年11月12日: 增加了力导图的自动布局功能。用户只需提供节点信息以及它们之间的关系,系统即可根据这些数据智能地计算出合理的坐标位置。 2020年8月6日: 新增了自连接样例和缩放功能(虽然可能存在一些问题),同时添加了使用说明文档以帮助新用户更好地理解和操作。 另外还增加了拖拽回调节点的功能,并引入了一个名为“viewOnly”的参数,允许开发者控制某个特定的流程节点是否处于只读状态。 2020年6月14日: 新增功能包括对连线类型的自定义、锚点的选择以及样式的设计等特性。这些改进进一步增强了设计者在构建复杂业务逻辑时的灵活性和自由度。 2020年5月10日: 修改了部分JS代码,以提升系统的稳定性和用户体验。
  • jsplumb图绘制
    优质
    这是一款基于JSPLUMB技术开发的简易流程图绘制工具,为用户提供直观便捷的操作界面,支持多种图形元素和连接线的自定义设置。 我根据网上开源项目visual-ivr-master改写了简易流程图画图工具,并在原有基础上增加和改进了一些功能,供大家分享交流。
  • jsplumbjqueryUIWeb拖拽功能
    优质
    本Web流程设计器采用JSPlumb与jQuery UI技术,实现高效灵活的页面元素拖拽及连接功能,适用于复杂业务流程的快速构建与优化。 基于Web的流程设计器采用jsPlumb与jQuery UI实现,支持拖拽功能,并兼容主流浏览器,适用于二次开发。
  • JSPlumb在线_演示版.rar
    优质
    JSPlumb在线流程设计工具_演示版.rar是一款基于JavaScript的开源库开发的交互式在线流程图绘制软件,适用于多种业务场景中的流程规划和展示。 在学习jsPlumb的过程中,我利用了jQueryUI、Bootstrap等资源来改版一个基于Web的在线流程设计器。这个项目给了我很多启发,并且我可以参考一些效果图以获得灵感。详情可以参照相关文章中的描述和示例效果。
  • Flow-Editor-VueOryxFlowable绘制
    优质
    Flow-Editor-Vue是一款采用Vue框架开发的流程图编辑器,它基于Oryx项目构建,并与Flowable工作流引擎集成,为用户提供直观高效的流程设计体验。 安装 `flow-editor-vue` 使用以下命令: ```shell npm i flow-editor-vue ``` 运行示例代码使用以下命令: ```shell npm run serve ``` 本项目中的 `examples` 文件夹包含用于测试 API 的示例代码,你可以通过调用已抛出的 API 并结合自定义 UI 来实现更加美观和符合实际项目需求的界面。最终的功能及效果由你自己决定。 以下是经过 UI 调整优化后的示例图:
  • VueJSPlumb编辑开发
    优质
    本工作流编辑器采用Vue框架并结合JSPlumb技术进行开发,支持灵活高效的流程图绘制与编辑功能。 实现一个工作流系统,该系统支持拖拽节点生成流程图;页面布局可缩放,并且每个节点都具备条件判断(if-else)功能以及多分支选择能力。 技术选型:使用Vue.js、FlowPlumb、SortableJS(Vue-draggable)等前端库来实现上述需求。具体来说,当鼠标悬停在某一个工作流图中的节点上时,会出现编辑和删除操作的选项;单击连接线可以设置条件,而双击则能够删除连线。 此外,系统还支持预设流程案例的切换展示,并且用户可以通过拖拽来调整画布的位置。同时具备放大缩小功能以适应不同的查看需求。一键生成流程图图片的功能也包括在内,方便快捷地导出当前的工作流设计成果。 数据导入方面,则目前仅限于yaml和json格式文件的支持;节点内部的详细信息可以被展示出来以便更好的理解整个工作流的设计逻辑。最后,在连接关系上支持回环链接(即一个流程步骤回到之前的某个阶段),但不允许同一个节点直接与自身相连以避免形成死循环。 以上就是该工作流系统的核心功能描述,涵盖了从基础操作到高级配置的各个方面。
  • JSPlumb示例:使用VueJSPlumb绘制
    优质
    本示例展示如何结合Vue框架与JSPlumb工具,轻松创建动态且交互性强的流程图。通过简洁代码实现节点连接与布局调整,适合开发者快速上手实践。 jsplumb-exampledemos:使用Jsplumb绘制流程图的简易项目,实现基本的流程图功能。要详细了解其工作原理,请参阅相关文档。
  • 数字IC
    优质
    本课程全面解析数字IC设计的核心流程与关键技术,涵盖从需求分析到版图验证各阶段所需软件工具的应用技巧,旨在培养具备实战能力的专业人才。 1. 基于标准单元的ASIC设计流程。 2. 数字前端设计流程 3. 数字后端设计流程
  • IC及应用
    优质
    本简介旨在介绍集成电路(IC)的设计流程及其所使用的关键工具。从需求分析到验证测试,每一步骤都将详细阐述,并重点讲解相应软件和硬件的应用与特点。适合初学者快速掌握基础知识。 我认为IC设计流程可以根据功能和应用场合大致分为三个部分:数字IC、模拟IC和FPGA。这三者之间既有相似之处也有不同点。在进行设计时,所使用的软件工具也存在相同与不同的地方。
  • Vivado水线CPU
    优质
    本项目基于Xilinx Vivado工具,实现了一个简化版的流水线控制处理器的设计与仿真。通过模块化设计方法,增强了处理器指令执行效率和性能。 计算机组成:简单流水线CPU的设计包括解决数据冒险和结构冒险、实现周期结束后各阶段的锁存以及实现内部前推等功能。