【前端】跟着maxkb学习流程图画法

背景

看看前端如何绘制流程图，界面好看点。

1. 选定学习对象-maxkb应用逻辑编排

2. 确定实现框架

maxkb采用vue3 + ts + logicflow2实现上面的界面，我们选择vue2 + js跟着学。

3. 关键逻辑：查看app-node.js

import { HtmlResize } from '@logicflow/extension'

app-node.js是maxkb的基础节点， 所有的节点基本都是由此扩展而来，以开始节点为例，其定义的js为：

import StartNodeVue from './index.vue'
import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
class StartNode extends AppNode {constructor (props) {super(props, StartNodeVue)}
}
export default {type: 'start-node',model: AppNodeModel,view: StartNode
}

而配置开始节点的属性字段、通过表单录入的逻辑则是在startNode/index.vue中编写。

4. 学习开始节点绘制

我们绘制一个demo级别的开始节点，通过logicflow2

可以看到很简陋，那么我们尝试自定义节点样式