フローチャート機能を備えたWebアプリの作成を非常に簡単にするJavaScriptライブラリ -Flowy

サイト構築 -JavaScript

Post on:2019年12月9日

Flowyの特徴

Flowyは、フローチャート機能を備えたWebアプリの作成を非常に簡単にするJavaScriptライブラリです。

Flowyは以下の機能をサポートしています。

ドラッグ&ドロップ（レスポンシブ対応）
自動スナップ
ブロックの再配置
ブロックの削除
ブロックの自動センタリング
条件付きスナップ
保存したファイルのインポート
スマホ・タブレットのサポート
jQueryをES6に置き換える（対応予定）
npmでのインストール（対応予定）
MITライセンス

Flowyのデモ

デモページでは、Flowyで実装したフローチャートの動きを楽しめます。

デモページ

サイドバーからドラッグ&ドロップでパネルを配置し、自由に作成できます。

デモページ

Flowyの使い方

Step 1: Flowyのインストール

FlowyをWebアプリに追加するのは非常に簡単です。

プロジェクトにjQueryを含める。
flowy.min.jsとflowy.min.cssをプロジェクトにリンクする。

Step 2: HTML

フローチャートを配置する要素を用意します。

<div class="create-flowy">The block to be dragged</div>
<div id="canvas"></div>

1 2	<div class="create-flowy">The block to be dragged</div> <div id="canvas"></div>

Step 3: JavaScript

スクリプトを初期化し、サイズなどを定義して実行します。

var spacing_x = 40;
var spacing_y = 100;
// Initialize Flowy
flowy($("#canvas"), onGrab, onRelease, onSnap, spacing_x, spacing_y);
function onGrab(block){
	// When the user grabs a block
}
function onRelease(){
	// When the user releases a block
}
function onSnap(block, first, parent){
	// When a block snaps with another one
}