Vue-Blocks - Vue製のデータフローエディタ
ノードをつなぎ合わせてユーザがその場で動作を変えられる仕組みは人気ですが、そのUIはとても複雑です。専用のライブラリを使いますが、それ以外の仕組みとの相性を選びます。 もしVueで作っているならばVue-Blocksがその役割にぴったりでしょう。
Vue-Blocksの使い方
デモ画面です。
ノードを追加できます。種類によってインプットとアウトプットの数が違います。
ノード同士はマウスのドラッグ&ドロップで連結できます。
Vue-BlocksはVueコンポーネントなので、特定のフォーマットに沿ってデータを渡すだけでこのUIを作ってくれます。後は処理が終わった時のデータを保存するだけです。ビジュアルプログラミングやデータフローなど色々な場面で使えそうです。
Vue-BlocksはVue製のオープンソース・ソフトウェア（MIT License）です。