LogicFlow：流程可视化的前端开源框架
LogicFlow 是由滴滴体验平台技术研发的一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和简单灵活的节点自定义、插件等拓展机制，方便我们快速在业务系统内满足类流程图的需求。
🕵️LogicFlow 是什么
支持前端研发自定义开发各种逻辑编排场景，如流程图、ER 图、BPMN 流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。
目前，LogicFlow 已经支持了客服业务下 IVR、工单流转、智能机器人等多个运营系统，在各系统不同的流程配置需求中得到了验证。
✨LogicFlow 特性
高拓展性 兼容各种产品自定义的流程编辑需求，绝大部分模块以插件的形式实现，支持各模块自由插拔。 重执行 流程图能完备的表达业务逻辑，不受流程引擎限制。 专业 专注于业务流程图编辑的框架
🔮效果展示
绘制审批流程图
vue 应用 demo
BPMN应用demo
基于LogicFlow和rough.js实现的手绘风格流程图
🧱LogicFlow 实现原理和架构
整体架构图
@logicflow/core 提供了流程图编辑器基础的能力@logicflow/extension 是基于 @logicflow/core 的拓展性开发的插件。模块抽象
事件系统
⚒️安装体验
直接用<script>引入
LogicFlow 分为core包和extension包。由于 LogicFlow 本身会有一些预置样式，所以除了需要引入 js, 还需要引入 css。
<!--LogicFlow core包css-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/style/index.css"
/>
<!--LogicFlow extension包css-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/style/index.css"
/>
<!--LogicFlow core包js-->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/logic-flow.js"></script>
<!--LogicFlow的插件支持单个引入，这里以菜单插件为例-->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/Menu.js"></script>使用 npm 引入
npm install @logicflow/core
npm install @logicflow/extension在 vue 或者 react 等前端框架中使用 logicflow
LogicFlow 本身是以 umd 打包为纯 JS 的包，所以不论是 vue 还是 react 中都可以使用。这里需要注意一个点，那就是初始化 LogicFlow 实例的时候，传入的参数 container,必须要 dom 上存在这个节点，不然会报错请检查 container 参数是否有效。
注意LogicFlow 支持初始化不传容器宽高参数，这个时候默认会使用 container 的宽高。请保证初始化 LogicFlow 的时候，container 已经存在宽高了。
1、vue代码示例
<template>
<div class="container" ref="container"></div>
</template>
<script>
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";
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>2、react代码示例
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";
import { useEffect, useRef } from "react";
export default function App() {
const refContainer = useRef();
useEffect(() => {
const logicflow = new LogicFlow({
container: refContainer.current,
grid: true,
width: 1000,
height: 500,
});
logicflow.render();
}, []);
return <div className="App" ref={refContainer}></div>;
}3、运行结果
📚结语
相信你对 LogicFlow 已经有一个大概的认识了，如果在你负责的业务中也有流程编辑的诉求，并且有较高的拓展性需求，那 LogicFlow 会是一个好的选择。
相关链接参考：
官网地址： https://site.logic-flow.cn/docs/#/ 项目源码： https://gitee.com/logic-flow/LogicFlow 教程： https://site.logic-flow.cn/docs/#/zh/guide/start 官网API: https://site.logic-flow.cn/docs/#/zh/api/logicFlowApi LogicFlow 所有的插件地址： https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/ Vuejs3.x + Typescript 上手指南： https://www.yuque.com/fe-xiaoxin/zeots5 Vuejs3.x + Typescript 在线案例： https://1024code.com/collections/25
👨🎓聊一聊
公众号推送改版，务必点击【爱编程爱技术】右上角【设为星标🌟】，这样才不会错过推送。
如果侵犯了您的权益，请点击菜单栏联系公众号，一经核实，我们会在最短的时间内删除！感谢理解！
该系列软件虽经本人亲测可用，但难免有疏忽之处，一旦您下载使用此软件，后续风险需自行承担，发布者本人不对使用此资源负任何责任！
点点关注不迷路
您可能喜欢：