安装依赖
// 安装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,项目就运行起来了