一、LogicFlow 介绍

专栏背景

新的项目中要使用到 LogicFlow ，由于之前没有接触过，所以进行产品评审的时候也是一脸懵逼，经过产品的讲解及会后的了解，才明白 LogicFlow 是一个多么优秀的流程图框架，由于之前有过 BPMN.js 的使用经验，所以觉着上手也挺简单（即使没有BPMN.js的使用经验），后面忙于项目进度的推进，也没有时间对这个框架里的功能进行使用总结，后面随着项目上线，稍微有点空闲时间，觉着有必要记录一下。

专栏介绍

以上也就是这个专栏出现的原因，这份专栏的颗粒度比较小，对功能有比较有针对性讲解使用，希望能够给到需要同学一些实际的帮助，能够在项目中落地运用，那么这份专栏就有了他存在的意义。

这篇文章主要是对 LogicFlow 和 专栏笔记 的介绍，各位同学可以根据自己的需求进行跳跃式查看，不必要挨着细细阅读，如果在阅读的过程中发现了一些问题，可以多多留言评论，如果对你有所帮助，那么请咚咚你的发财黄金手指，点赞，搜藏。

实现目标

这是我本地测试项目运行起来的后的案例，希望能够通过这份专栏学习，能够完成里面的一些功能以及更复杂的需求。

LogicFlow 介绍

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

LogicFlow 特性

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

LogicFlow主要分为三大模块：

1. core包 - 核心包

   节点、边、背景、网格、主题、事件 …

2. extension包 - 插件包（不使用插件时不需要引入）

   菜单、拖拽面板、小地图、控制面板、选框 …

3. engine包 - 执行引擎

LogicFlow 主要组成部分

1. 实例（配置项）

   const lf = new LogicFlow({
   	container: '', // 画布挂载DOM节点
   	// ...其他配置项
   })
   

2. 节点 （Node）

   内置的节点如下所示，分为这么几大类。

但实际项目中主要还是根据自己的业务需求进行自定义节点

3. 边（Edge，节点与节点之间的连线）
4. 背景 （Background）
5. 网格（Grid）
6. 主题（Theme）
7. 事件（Event）
8. 插件（@logicflow/extension）

注意：关于这一段，建议直接看官网介绍及示例，他们比我写的好，这里就不在过多赘述。

LogicFlow 专栏目录

注意：下面是这份专栏的所有章节，中间会根据实际情况可能会有所调整。

1. LogicFlow 介绍
2. LogicFlow 环境准备
3. LogicFlow 基础配置介绍及实现一个基础 Demo
4. LogicFlow 自定义左侧菜单Menu
5. LogicFlow 自定义业务节点 Node
6. LogicFlow 自定义业务边 Edge
7. LogicFlow 节点连线规则校验
8. LogicFlow 插件使用
9. LogicFlow 内置拖拽面板插件
10. LogicFlow 内置控制插件及自定义控制功能
11. LogicFlow 内置右键菜单插件
12. LogicFlow 内置MiniMap插件
13. LogicFlow 一键美化功能实现
14. LogicFlow 选区功能实现
15. LogicFlow 线条动画开启关闭
16. LogicFlow 节点状态校验
17. LogicFlow 节点/边面板功能
18. LogicFlow 学习总结

最后

这一节的内容就到此结束了，主要是对LogicFlow的基础概括，让大家对LogicFlow 和 这份专栏 有个基础的了解，后面每一章节都会以实际的项目需求进行讲解，希望对大家有所帮助。

如果看完对你有所帮助，希望能够点赞，收藏。