Vue 3 的简单、可定制、快速、交互式的流程图组件。

安装和下载：

# Yarn
$ yarn add @braks/vue-flow

# NPM
$ npm i @braks/vue-flow

基本用法：

1、导入vue-flow。

import { VueFlow, Elements } from '@braks/vue-flow';
// 核心样式表
@import "node_modules/@braks/vue-flow/dist/styles.css";
// 默认主题（可选）
@import "node_modules/@braks/vue-flow/dist/theme-default.css";

2.在模板中添加vue-flow组件。

<VueFlow :elements="elements" />

3. 向流程图添加节点。

const elements: Elements = [
  {
    id: '1',
    type: 'input', // 输入节点
    data: { label: 'Input Node' },
    position: { x: 250, y: 25 },
  },
  {
    id: '2',
    // 可以将Vue组件、字符串或html字符串作为标签传递
    data: { label: '<div>Default Node</div>' },
    position: { x: 100, y: 125 },
  },
  {
    id: '3',
    type: 'output', // 输出节点
    data: { label: 'Output Node' },
    position: { x: 250, y: 250 },
  },
  // 动画边
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e2-3', source: '2', target: '3' },
]