点击上方蓝字关注我们
IT 咖啡馆，探索无限可能！
恭喜你发现了这个宝藏，这里你会发现优质的开源项目、IT知识和有趣的内容。
现在的系统中对于可视化的要求越来越高，各种流程管理和设计都需要通过可视化的方式来实现，如果有一个合适的开发框架，那必然可以起到巨大的帮助。
今天我们分享的开源项目，它是一款由滴滴开源的流程图编辑框架，可以让你在自己的系统中快速实现可视化流程图的能力，它就是：LogicFlow
LogicFlow 是什么
LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和简单灵活的节点自定义、插件等拓展机制，方便我们快速在业务系统内满足类流程图的需求。
LogicFlow 脱胎于滴滴技术团队在客服业务下的实践，是由智能中台—体验平台研发的一款流程可视化的前端框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展能力，方便我们快速在业务系统内满足类流程图编辑器的需求。主要的功能特性包括了以下：
可视化模型：通过 LogicFlow 提供的直观可视化界面，用户可以轻松创建、编辑和管理复杂的逻辑流程图。
高可定制性：用户可以根据自己的需要定制节点、连接器和样式，创建符合特定用例的定制逻辑流程图。
灵活易拓展: 内置提供丰富的插件，用户也可根据自身需求定制复杂插件实现业务需求。
自执行引擎: 执行引擎支持浏览器端执行流程图逻辑，为无代码执行提供新思路。
数据可转换：支持 LogicFlow 数据与 BPMN、Turbo 等各种后端执行引擎数据结构转换能力。
以下是一些LogicFlow的示例效果：
BPMN支持：
比赛晋级图
审批流
脑图：
同类对比
目前市面上针对于应用流程可视化的工具是不少的，比如BPMN.js、X6、Jsplumb、G6-editor，那么滴滴开源的LogicFlow和这些对比有什么差异化呢？
针对于使用者对于流程图工具的差异性，比如有的人需要简单、有的复杂，数据内容也是有简单、有复杂。有几点对比：
BMPN.js、Jsplumb 的拓展能力不足，自定义节点支持成本很高；只能全量引入，各系统无法按需引入
与后端配套的流程引擎适配，成本较高。均不支持数据转换、不支持流程的校验等业务定制需求。
文档、示例不健全。X6 和 BPMN 的文档不健全
安装 LogicFlow
你可以通过npm、yarn或者pnpm来安装LogicFlow，可以根据自己的习惯和项目情况自行选择：
# npm$ npm install @logicflow/core @logicflow/extension --save# yarn$ yarn add @logicflow/core @logicflow/extension# pnpm$ pnpm add @logicflow/core @logicflow/extension
在HTML页面里还可以通过CDN的方式来引入，由于LogicFlow本身会有一些预置样式，所除了需要引入js包外还需要引入css包。 2.0版本之后的CDN包的引入方式：
<!-- 引入 core包和对应css --><script src="<https://cdn.jsdelivr.net/npm/@logicflow/core/dist/index.min.js>"></script><link href="<https://cdn.jsdelivr.net/npm/@logicflow/core/lib/style/index.min.css>" rel="stylesheet"><!-- 引入 extension包和对应css（不使用插件时不需要引入） --><script src="<https://cdn.jsdelivr.net/npm/@logicflow/extension/dist/index.min.js>"></script><link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/style/index.min.css>" />
上手使用
在原生JS环境下使用
<!-- 引入 core包 --><script src="<https://cdn.jsdelivr.net/npm/@logicflow/core/dist/index.min.js>"></script><link href="<https://cdn.jsdelivr.net/npm/@logicflow/core/lib/style/index.min.css>" rel="stylesheet"><!-- 创建画布容器 --><div id="container"></div><script>// 准备图数据const data = {// 节点nodes: [{id: '21',type: 'rect',x: 100,y: 200,text: 'rect node',},{id: '50',type: 'circle',x: 300,y: 400,text: 'circle node',},],// 边edges: [{type: 'polyline',sourceNodeId: '50',targetNodeId: '21',},],}// 创建画布实例const lf = new Core.default({container: document.querySelector('#container'),width: 700,height: 500,grid: true,})// 渲染画布实例lf.render(data)</script>在框架中使用也可以在React、vue等框架中使用，以下是在VUE中使用的代码：<template><div class="container" ref="container"></div></template><script>import LogicFlow from "@logicflow/core";import "@logicflow/core/lib/style/index.css";// import "@logicflow/core/dist/style/index.css"; // 2.0版本前的引入方式export default {mounted() {this.lf = new LogicFlow({container: this.$refs.container,grid: true,});this.lf.render();},};</script><style scoped>.container {width: 1000px;height: 500px;}</style>
使用插件
LogicFlow 最初的目标就是提供一个扩展性强的流程绘制工具，用来满足各种业务需求。
为了让LogicFlow的拓展性足够强，LogicFlow所有的非核心功能都使用插件的方式开发，并放到@logicflow/extension 包中。
如果需要使用插件，用户需要引入@logicflow/extension依赖，并根据自己的诉求取用插件。
如下使用了控制面板插件功能，提供了放大缩小或者自适应画布的能力，同时也内置了 redo 和 undo 的功能。
安装并使用命令安装的LogicFlow插件包
import LogicFlow from "@logicflow/core";import { Control } from "@logicflow/extension";*// 全局使用 每一个lf实例都具备Control*LogicFlow.use(Control);
示例
在项目的示例里，有各种场景实现的例子，可以供开发者参考：
https://site.logic-flow.cn/examples
总结
总体来说LogicFlow是一个非常不错的前端工具，可以满足开发者在流程图方面的需要，另外由于是滴滴内部孵化的项目，所以项目是经过了很大规模的验证的，质量也相对值得信赖，如果你有相关的开发需要，那么可以考虑使用。
项目信息
项目名称：LogicFlow
GitHub 链接：https://github.com/didi/LogicFlow
Star 数：7K
