重磅推荐！一款好用又好看的流程图编辑框架-优快云博客

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

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

《项目实战（视频）》：从书中学，往事上“练”
《互联网高频面试题》：面朝简历学习，春暖花开
《架构 x 系统设计》：摧枯拉朽，掌控面试高频场景题
《精进 Java 学习指南》：系统学习，互联网主流技术栈
《必读 Java 源码专栏》：知其然，知其所以然

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

国产 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

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

快速入门

LogicFlow的使用非常简单，只需要两步：

第一步、、、引入依赖

<!--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

可以编写一个简单的案例

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提供了一个工具，可以帮助大家所见即所得的绘图，效果如下：

工具地址：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

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

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

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

文章有帮助的话，在看，转发吧。
谢谢支持哟 (*^__^*）

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

快速入门

相关推荐