Vue Flow触ってみた

はじめに

組織図のようなものを作成できるツールを探していたところ、
Vue Flowを発見。

早速使ってみました。

導入

vue-flowの本体と、各コンポーネントを必要に応じてインストール

// vue-flow本体
yarn add @vue-flow/core
// 各コンポーネント
yarn add @vue-flow/background @vue-flow/controls @vue-flow/core @vue-flow/minimap @vue-flow/node-toolbar

用語

Nodeとは

こいつのこと。

typeを指定でき、input及びoutputを指定できる。

type: input

このように下方向にだけ接続できる。
スタートで使うイメージ。

type: output

inputの反対で、上方向にだけ接続できる。
ゴールで使うイメージ。

また、labelで指定すると、文字が入れられる。

Edgeとは

こいつのこと。

animated: trueでアニメーションを付けたり、

markerEnd: ○○で終点を変えたりすることができる。

また、labelで指定すると、文字が入れられる。

使い方

VueFlowコンポーネントにnodeやedge情報が入ったオブジェクトを渡してあげるだけ。

<script setup lang="ts">
import { VueFlow  } from '@vue-flow/core'
import { ref } from 'vue'
import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'

const elements = ref([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
  { id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
  { id: 'e1-3', source: '1', target: '3' },
  { id: 'e1-2', source: '1', target: '2', animated: true },
])
</script>
<template>
  <VueFlow v-model="elements" />
</template>

参考) 公式BasicExample

紹介したNodeのtypeや、Edgeのanimated以外にも様々なPropsが用意されているので、
いろいろなことができそうですね