ITエンジニア/デザイナ向けにオープンソースを毎日紹介

ノードをつなぎ合わせてユーザがその場で動作を変えられる仕組みは人気ですが、そのUIはとても複雑です。専用のライブラリを使いますが、それ以外の仕組みとの相性を選びます。

もしVueで作っているならばVue-Blocksがその役割にぴったりでしょう。

Vue-Blocksの使い方

デモ画面です。

ノードを追加できます。種類によってインプットとアウトプットの数が違います。

ノード同士はマウスのドラッグ&ドロップで連結できます。

Vue-BlocksはVueコンポーネントなので、特定のフォーマットに沿ってデータを渡すだけでこのUIを作ってくれます。後は処理が終わった時のデータを保存するだけです。ビジュアルプログラミングやデータフローなど色々な場面で使えそうです。

Vue-BlocksはVue製のオープンソース・ソフトウェア(MIT License)です。

Ghostiam/vue-blocks: Vue2 dataflow graph editor

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2