LogicFlow从新手到入门

安装依赖

LogicFlow官网

// 安装LogicFlow核心库
npm install @logicflow/core --save

//LogicFlow组件
npm install @logicflow/extension --save

入门案例

安装完成之后，在项目根目录下的src文件夹下的main.js中使用 import进行引用（相关css文件）

import '@logicflow/core/dist/style/index.css'
import '@logicflow/extension/lib/style/index.css'

开始使用
在页面中创建一个用于绘图的容器，可以是一个 div 标签。

  <!--操作面板-->
    <div id="container" class="container" ></div>

准备数据

const data = {
    
    
  // 节点
  nodes: [
    {
    
    
      id: 50, // 节点id
      type: 'rect', //节点类型：矩形
      x: 100, //x轴坐标
      y: 150, // y轴坐标
      text: '你好', //节点文本
    },
    {
    
    
      id: 21, // 节点id
      type: 'circle', // 节点类型:圆形
      x: 300,
      y: 150,
    },
  ],
  // 边
  edges: [
    {
    
    
      type: 'polyline',
      sourceNodeId: 50, //原始节点id
      targetNodeId: 21, // 目标节点id
    },
  ],
};

完整代码

<template>
  <div class="wrapper">
    <div id="container" class="container"></div>
  </div>
</template>

<script>
import {
      
      LogicFlow} from '@logicflow/core'
export default {
      
      
  name: 'HelloWorld',
  data () {
      
      
    return {
      
      
    }
  },
  mounted () {
      
      
    this.init()
  },
  methods: {
      
      
    // 流程图初始化
    init () {
      
      
      const data = {
      
      
        // 节点
        nodes: [
          {
      
      
            id: 50, // 节点id
            type: 'rect', // 节点类型：矩形
            x: 100, // x轴坐标
            y: 150, // y轴坐标
            text: '你好' // 节点文本
          },
          {
      
      
            id: 21, // 节点id
            type: 'circle', // 节点类型:圆形
            text: '第二',
            x: 300, // x轴坐标
            y: 150 // y轴坐标
          }
        ],
        // 边
        edges: [
          {
      
      
            type: 'line', // 内置连线方式：直线(line);直角折线(polyline);贝塞尔曲线(bezier)
            sourceNodeId: 50, // 原始节点id
            targetNodeId: 21 // 目标节点id
          }
        ]
      }
      // 初始化配置
      const lf = new LogicFlow({
      
      
        container: document.querySelector('#container'), // 容器
        // 画布配置
        // width: window.innerWidth, // 宽度
        height: window.innerHeight, // 高度
        background: {
      
      
          color: '#2b364a' // 背景颜色
        },
        grid: {
      
      
          type: 'mesh',
          size: 20
        },
        isSilentMode: true // 仅仅可以浏览，不可进行节点和文本编辑
      })
      // 开始渲染
      lf.render(data)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .wrapper{
      
      
    position: relative;
    overflow: auto;
  }
  .container{
      
      
    width: 100%;
    height: 100vh;
    outline: none;
  }
</style>

页面效果截图

实际运用案例

下载地址
下载成功之后，在项目根目录下打开cmd命令窗口，执行npm install ，然后执行npm run dev,项目就运行起来了