最近逛滴滴开源平台的时候发现了一款流程图编辑神器LogicFlow。起初还不知道这个东西是干什么的，细看一下发现了它的神奇之处。下面我就介绍一下这款神器。

神器之LogicFlow

LogicFlow是滴滴体验平台技术研发团队开发的一款专注于流程可视化的前端框架。是基于 JavaScript 的流程图编辑框架，它不仅提供了丰富的流程图交互和编辑功能，还支持灵活的节点自定义及插件扩展机制，极大地简化了业务系统中流程图的实现过程。通过集成LogicFlow，开发者能够轻松地创建出符合需求的流程图界面，提高工作效率。

官网地址：
https://site.logic-flow.cn/

github地址：
https://github.com/didi/LogicFlow

特性

• 可视化模型 提供可视化界面，可随时查看，修改流程图
• 高可定制化 用户可以根据自己需求定制自己的流程图
• 自执行引擎 支持浏览器执行流程图

快速安装

#安装依赖
npm install @logicflow/core --save

# 引入cdn (2.0版本以上)
<!-- 引入 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" />
  
  # 2.0版本以前
  <!-- 引入 core包和对应css -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/core@1.2.27/dist/logic-flow.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@logicflow/core@1.2.27/dist/style/index.css" rel="stylesheet">

<!--  引入 extension包和对应css（不使用插件时不需要引入） -->
<!-- 值得注意的是：2.0版本之前，插件的脚本包是分开导出的 -->
<!-- 因此引入某个组件，引用路径需要具体到包名，就像下文引入Menu插件这样 -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/extension@1.2.27/lib/Menu.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/extension@1.2.27/lib/style/index.css" />

案例

在线调试

LogicFlow内置在线调试能力方便用户随时查看，修改流程图效果。

应用场景

• 软件开发流程管理
• 无代码、低代码流程配置
• 智能机器人逻辑编排
• 审批流配置

总结

喜欢LogicFlow的小伙伴快来体验吧。作为一款强大的开源产品，LogicFlow在不断地完善，强大，成为我们工作强有力的工具。

---

好了，今天就介绍这么多了。欢迎大家评论区私信留言讨论。