重磅推荐!一款好用又好看的流程图编辑框架

👉 这是一个或许对你有用的社群

🐱 一对一交流/面试小册/简历优化/求职解惑,欢迎加入「芋道快速开发平台」知识星球。下面是星球提供的部分资料: 

fef8ac42aa06dbc7d8ee41426e7c8878.gif

👉这是一个或许对你有用的开源项目

国产 Star 破 10w+ 的开源项目,前端包括管理后台 + 微信小程序,后端支持单体和微服务架构。

功能涵盖 RBAC 权限、SaaS 多租户、数据权限、商城、支付、工作流、大屏报表、微信公众号等等功能:

  • Boot 地址:https://gitee.com/zhijiantianya/ruoyi-vue-pro

  • Cloud 地址:https://gitee.com/zhijiantianya/yudao-cloud

  • 视频教程:https://doc.iocoder.cn

来源:TJ君


最近因为要在系统里植入一个流程图的灵活绘制功能。如果说自己写一个,那必将是个庞大的工程,所以就在GitHub上调研了一番。最后发现了今天要给大家推荐的这个开源框架:LogicFlow

439a7e29122eb7863906160b05e50527.png

LogicFlow是一款流程图编辑框架,它提供了必要的流程图交互和编辑功能,同时还支持节点自定义和插件拓展。LogicFlow可以用于各种逻辑编排场景,例如流程图、ER图和BPMN流程。它在工作审批配置、机器人逻辑编排和无代码平台流程配置等方面都有广泛应用。

fafd148c9167e3e901b17efbb9e7dba5.png

快速入门

LogicFlow的使用非常简单,只需要两步:

  1. 第一步、、、引入依赖

<!--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
  1. 可以编写一个简单的案例

import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";

const lf = new LogicFlow({
  container: document.querySelector("#container")
});

lf.render({
  nodes: [
    {
      id: "node_id_1",
      type: "rect",
      x: 100,
      y: 100,
      text: {
        x: 100,
        y: 100,
        value: "节点1"
      },
      properties: {}
    },
    {
      id: "node_id_2",
      type: "circle",
      x: 200,
      y: 300,
      text: {
        x: 200,
        y: 300,
        value: "节点2"
      },
      properties: {}
    }
  ],
  edges: [
    {
      id: "edge_id",
      type: "polyline",
      sourceNodeId: "node_id_1",
      targetNodeId: "node_id_2",
      text: {
        x: 139,
        y: 200,
        value: "连线"
      },
      startPoint: {
        x: 110,
        y: 140
      },
      endPoint: {
        x: 200,
        y: 250
      },
      pointsList: [
        {
          x: 100,
          y: 140
        },
        {
          x: 100,
          y: 200
        },
        {
          x: 200,
          y: 200
        },
        {
          x: 200,
          y: 250
        }
      ],
      properties: {}
    }
  ]
});

这里不得不提一下,LogicFlow提供了一个工具,可以帮助大家所见即所得的绘图,效果如下:

3795302c281c39549a6018725df8094c.png

工具地址:https://codesandbox.io/s/logicflow-example-1-zy3o85?file=/step1/index.js:0-1170

最后,奉上最关键的几个传送门:

  • 开源项目:https://github.com/didi/LogicFlow

  • 案例地址:https://site.logic-flow.cn/examples/#/gallery


欢迎加入我的知识星球,全面提升技术能力。

👉 加入方式,长按”或“扫描”下方二维码噢

9239cb1b7a28cf0ae27364d8b301176e.png

星球的内容包括:项目实战、面试招聘、源码解析、学习路线。

19768dda3d61b4fae75fc3f22218ea47.png

da2642165a4a169e98513559de8950d1.png1d1845109fcc91a221b78dcd8f6ea4e4.pngd014a88144834f37f8a53c9b5eaa9607.png4a3da04971a02287e67b7b0444da1180.png

文章有帮助的话,在看,转发吧。
谢谢支持哟 (*^__^*)
阿里零售通如意POS S1是一款由阿里巴巴推出的智能收银机,作为小店的"大脑",它能够为小店提供更加便捷、高效的收银服务。 首先,如意POS S1采用了先进的人工智能技术。通过与阿里巴巴的大数据平台连接,它可以准确地识别商品信息,实现自动识别、结算和统计功能。无论是快速扫描条形码还是人工输入商品信息,都能够快速记录和结算,避免了繁琐的手工操作。 其次,如意POS S1拥有丰富的功能扩展。它支持支付宝、微信支付等多种支付方式,能够满足顾客的多样化支付需求。同时,它还可以通过连接蓝牙打印机、电子秤、扫码枪等外部设备,实现更多个性化的需求,提升小店的运营效率。 此外,如意POS S1还具备强大的数据分析和管理功能。它能够实时监控库存情况,提醒小店及时进货,避免断货情况的发生。同时,它还能根据销售数据进行分析,为小店提供经营建议,帮助小店主了解销售情况和市场趋势,做出更加明智的经营决策。 总的来说,阿里零售通如意POS S1的重磅上线为小店带来了新的智能化解决方案。它通过人工智能、丰富的功能扩展和数据分析,实现了小店收银、支付和管理的一体化,为小店提供了更便捷、高效、智能的运营管理工具。小店可以通过使用如意POS S1,提升服务质量,提高销售额,并更好地适应市场竞争的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值