フローチャートが作れるミニマルなJavaScriptライブラリ「Flowy」

2019/11/29 17:44

Flowy
https://github.com/alyssaxuu/flowy

Flowyの特徴

「Flowy」は、jQueryだけでフローチャートが作れるミニマルなJavaScriptライブラリです。

フローチャートを実装

$ git clone https://github.com/alyssaxuu/flowy.git
# flowyをインストールします

$ cd flowy
# ディレクトリに移動

# flowy.min.js と flowy.min.css をプロジェクトにインポート

実装手順は非常に簡単。

<div class="create-flowy">The block to be dragged</div>
<div id="canvas"></div>
var spacing_x = 40;
var spacing_y = 100;
// Initialize Flowy
flowy($("#canvas"), onGrab, onRelease, onSnap, spacing_x, spacing_y);
function onGrab(){
	// When the user grabs a block
}
function onRelease(){
	// When the user releases a block
}
function onSnap(){
	// When a block snaps with another one
}

あとは、フローチャートを表示したい画面にHTMLとJavascriptのコードを埋め込むだけです。

このようなフローチャートの画面が表示されます。

{
	"id": 1,
	"parent": 0,
	"data": [
		{
		"name": "blockid",
		"value": "1"
		}
	]
}

データもJson形式で取得できるので、取り回しも自由に組めそうです。

Flowy
https://github.com/alyssaxuu/flowy

appstore
googleplay
会員登録
URLからPICKする

会員登録して、もっと便利に利用しよう

  • 1.

    記事をストックできる
    気になる記事をPickして、いつでも読み返すことができます。
  • 2.

    新着ニュースをカスタマイズできます
    好きなニュースフィードをフォローすると、新着ニュースが受け取れます。