LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow 支持前端研发自定义开发各种逻辑编排场景，如流程图、ER 图、BPMN 流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。 目前，LogicFlow 已经支持了客服业务下 IVR、工单流转、智能机器人等多个运营系统，在各系统不同的流程配置需求中得到了验证。

提供了一个流程图编辑所必需的各项能力，这也是 LogicFlow 的基础能力：

当基础能力无法满足业务需求的时候，便需要基于业务场景拓展。这也是 LogicFlow 能支持客服侧多个系统的关键所在。

基于上述拓展的能力，前端研发能够根据实际业务场景的需求，灵活的开发出所需的节点、组件等。下面有两个基于 LogicFlow 拓展能力做出的流程图：

BPMN： http://logic-flow.org/examples/#/extension/bpmn

审批流程：http://logic-flow.org/examples/#/extension/approve

注意：初始化 LogicFlow 实例的时候，传入的参数 container,必须要 dom 上存在这个节点，不然会报错请检查 container 参数是否有效。

效果：

当创建一个实例的时候，我们需要传递初始化 LogicFlow 实例的配置项。LogicFlow 支持非常丰富的初始化配置项，但是只有 LogicFlow 画布初始化时挂载的 DOM 节点container参数是必填的。完整的配置项参见 LogicFlow API。

在 LogicFlow 里面，我们把流程图看做是由节点和连线组成的图。所以我们采用如下数据结构来表示 LogicFlow 的图数据。

为什么节点文本还要有坐标，直接用节点的坐标不行吗？

text是可以直接用字符串，这个时候，如果是节点的文本，我们会自动采用节点坐标作为节点文本坐标，如果是连接文本，我们会基于不同的连线类型计算一个合适的坐标作为节点坐标。 在有些应用场景下，我们文本是可以拖动的，为了保持一致，我们 LogicFlow 导出的文本数据都会带上坐标。

连线 startPoint、endPoint 数据和 pointsList 为什么是重复的？

目前，在 LogicFlow 内部内置了line, polyline, bezier三种基础连线，这三种连线都有startPoint、endPoint数据。但是其中line导出的数据是不会带上pointsList。对于polyline, pointsList表示折线所有的点。对于bezier，pointsList表示[‘起点’, ‘第一个控制点’，‘第二个控制点’, ‘终点’]。

properties 是用来做什么的？ properties 的 LogicFlow 保留给具体业务场景使用的数据。

例如：在审批流场景，我们定义某个节点，这个节点通过了，节点为绿色，不通过节点为红色。那么节点的数据描述可以为:

type 的含义是什么？

type 表示节点或者连线的类型，这里的类型不仅可以是rect,polyline这种 LogicFlow 内置的基础类型，也可以是用户基于基础类型自定义的类型。

LogicFlow 的内置了一些基础节点，开发者在实际应用场景中，可以基于这些基础节点，定义符合自己业务逻辑的节点。

认识 LogicFlow 的基础节点 LogicFlow 是基于 svg 做的流程图编辑框架，所以我们的节点和连线都是 svg 基本形状，对 LogicFlow 节点样式的修改，也就是对 svg 基本形状的修改。LogicFlow 内部存在 7 种基础节点，分别为：

和节点一样，LogicFlow 也内置一些基础的边。LogicFlow 的内置边包括:

LogicFlow 提供了设置主题的方法，便于用户统一设置其内部所有元素的样式。 设置方式有两种：

当我们使用鼠标或其它方式与画布交互时，会触发的对应的事件。通过监听这些事件，可以获取其在触发时所产生的数据，根据这些数据来实现需要的功能。详细可监听事件见事件 API

LogicFlow 支持用逗号分割事件名。

网格是指渲染/移动节点的最小单位。网格最主要的作用是在移动节点的时候，保证每个节点中心点的位置都是在网格上。这样更有利于节点直接的对齐。一般来说，网格的间隔越大，在编辑流程图的时候，节点就更好对齐；网格的间隔越小，拖动节点的感觉就更加流畅。

网格默认关闭，渲染/移动最小单位为 1px，若开启网格，则网格默认大小为 20px，渲染节点时表示以 20 为最小单位对齐到网络，移动节点时表示每次移动最小距离为 20px。

注意在设置节点坐标时会按照网格的大小来对坐标进行转换，如设置中心点位置{ x: 124, y: 138 } 的节点渲染到画布后的实际位置为 { x: 120, y: 140 }。所以使用 LogicFlow 替换项目中旧的流程设计器时，需要对历史数据的坐标进行处理。

提示在实际开发中，如果期望节点既可以中心对齐，也可以按照两边对齐。那么自定义节点的宽高需要是 grid 的偶数倍。也就是假设 grid 为 20，那么所有的节点宽度最好是 20、40、80、120 这种偶数倍的宽度。

开启网格并应用默认属性：

提供可以修改画布背景的方法，包括背景颜色或背景图片，背景层位于画布的最底层。

创建画布时，通过 background 选项来设置画布的背景层样式，支持透传任何样式属性到背景层。默认值为 false 表示没有背景。

配置项 设置背景颜色

在流程图编辑场景中比起通过代码配置创建节点，我们可能更需要通过图形用户界面来操作创建流程图，这时候就可以通过拖拽的方式来实现。

拖拽需要结合图形面板来实现，步骤：创建面板 → 拖拽初始化 → 监听 drop 事件创建节点

示例如下：

通过上面的代码可以看出，将节点通过div标签+css样式的方式绘制到面板中，并为其绑定onMouseDown事件，当拖拽图形时，会触发lf.dnd.startDrag函数，表示开始拖拽，并传入选中图形的配置，startDrag入参格式：

拖拽结束鼠标松开时，将当前鼠标的位置转换为画布上的坐标，并以此为节点的中心点坐标x、y，合并拖拽节点传入的nodeConfig，监听到 drop 事件后会调用lf.addNode方法创建节点。

使用拖拽面板插件

LogicFlow 在 extension 中内置了拖拽面板插件，如果不想自定义图形面板，可以使用此插件快速实现。

快捷键配置 通过创建 LogicFlow 实例时传入 options 的 keyboard 属性可以开启快捷键， 可以只配置 enabled 属性，为 true 时，代表开启默认的快捷键。

内置快捷键功能 参考不同的产品，内置了复制，粘贴，redo/undo，删除 的快捷键。

快捷键 功能 cmd + c 或 ctrl + c 复制节点 cmd + v 或 ctrl + v 粘贴节点 cmd + z 或 ctrl + z 撤销操作 cmd + y 或 ctrl + y 回退操作 backspace 删除操作 自定义快捷键 shortcuts 则可以定义用户自定义的一组快捷键 值得一提的是 keys 的规则，与mousetrap一致。

我们已自定义删除功能为例，在删除之前添加一个确认操作。

对齐线能够在节点移动过程中，将移动节点的位置与画布中其他节点位置进行对比，辅助位置调整。位置对比有如下两个方面。

对齐线使用 普通编辑模式下，默认开启对齐线，也可通过配置进行关闭。 在静默模式下，无法移动节点，所以关闭了对齐线功能，无法通过配置开启。

对齐线样式设置 对齐线的样式包括颜色和宽度，可以通过设置主题的方式进行修改。

LogicFlow 提供了非常多的控制图如何编辑的配置，详情见editConfigModel。

初始化 LogicFlow 支持在初始化的时候传入很多配置参数，图编辑的配置也可以在初始化的时候传入。

更新图编辑方式

静默模式 画布的静默模式可以简单理解为“只读”模式，这种模式下，画布中的节点和边不可移动，不可进行文案修改，没有锚点。

提示 静默模式只是 LogicFlow 内置的流程图编辑控制的一种快捷方式。