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

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


コメントを読む

新着ピック  






















新着ニュース

AWS Configのすべてのリソース記録を全リージョンで有効化するシェルスクリプト書いた | Developers.IO

撮影した動画をプチ編集、複数人に送れるスマホアプリ ドコモがリリース 5Gが始まるともっと便利に

Netflix、スタジオジブリの21作品放映権獲得(日本と北米以外で)

ネットフリックス、ジブリ作品を世界配信へ | TechCrunch Japan

控えめな出展だったHuawei、米国を果敢に攻めるTCLとOnePlus CES 2020で感じた中国メーカーの温度差

[速報]AWS大阪リージョン開設がアナウンスされました!!(2021年初頭予定) | Developers.IO

実物大の“動くガンダム”、横浜に現る 10月から一般公開

[レポート]Lake FormationとGlueでワークフローを構築するハンズオン #ANT201 #reinvent | Developers.IO

「無印良品ネットストア」が18日ぶりに再開--機能の一部は使えず

OPPOの5Gスマホ「Reno3」シリーズが中国で発売 5万〜6万円台のお手頃価格

1日70円で傘を借りられるアイカサが水戸市で面展開、行政との初協定締結も | TechCrunch Japan

AWS、大阪に通常リージョン開設へ 21年初頭の予定 3つのAZ、「ローカル」の制限解除

Lookerでフィルタの選択値一覧の表示が遅い時の対処法 | Developers.IO

【2/12(水)札幌】「SAPPORO.AWS #5 〜開発者向けAWS勉強会〜」を開催します | Developers.IO

無印のネットストア、18日ぶりに再開 不具合でメンテ長期化

三菱電機にサイバー攻撃 個人情報や機密情報が流出の可能性

LINEに画像を送ると、AIが3秒で文字起こし 「ばりぐっどくん」アプリ、法人向けに提供へ

Firecrackerを利用したコンテナランタイムfirecracker-containerdを試してみる | Developers.IO

ギガファイル便、「ファイル取り扱いの規約なし」で炎上 運営元は「技術者のみの会社で、手が回っていなかった」と謝罪

【2/13(木)東京】Dome9ハンズオンセミナー「AWS設定のリスクを可視化してみよう!」を開催します | Developers.IO

もっと見る
記事をPICKする
会員登録
Register
記事をPICKする

会員登録すると、もっと便利に利用できます。