フローチャートが作れるミニマルな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


コメントを読む

新着ピック  






















新着ニュース

イーロン・マスクも称賛しそうなレゴ製のTesla Cybertruck | TechCrunch Japan

まさに手首にTwitter、Apple Watch用の高速高機能Twitterアプリ「Chirp 2.0」 | TechCrunch Japan

[速報]App MeshがOutpostsに対応しました! #reinvent | Developers.IO

#08 : ハンズオンラボガイド「ロールベースのアクセス制限とアカウント管理」 – Snowflake Advent Calendar 2019 | Developers.IO

QualcommがXR用のSnapdragon発表 KDDIは2020年度に5G対応のスマートグラス発売へ

Swift5.1から使えるOrdered Collection Diffingについて | Developers.IO

[レポート] あなたの知らないAmazon API Gateway #SVS212-R2 #reinvent | Developers.IO

[レポート] クラウドでの脅威管理:Amazon GuardDutyおよびAWS Security Hub #SEC206 #reinvent | Developers.IO

バッチコマンドをテストしやすいようにリファクタリングする - Mercari Engineering Blog

[レポート] Amazon Redshiftのマテリアライズドビューでパフォーマンスを加速 #ANT417 #reinvent | Developers.IO

Amazon Builders’ Libraryの「Going faster with continuous delivery」を読む [感想文] | Developers.IO

Amazon Builders’ Libraryの「G...

DevelopersIO / 11時間前


#07 : ハンズオンラボガイド「タイムトラベル機能の使用」 – Snowflake Advent Calendar 2019 #SnowflakeDB | Developers.IO

[レポート][SEC309]IAM Access Analyzerの詳細 #SEC309 #reinvent | Developers.IO

[レポート][SEC309]IAM Access An...

DevelopersIO / 12時間前


[社内向け]セッション動画をゆっくり再生して英語を聞き取る #reinvent | Developers.IO

[レポート]AIM362-R1 – Amazon SageMakerを使った構築、学習&デバッグ、デプロイ&モニタリング #reinvent | Developers.IO

[レポート] GAM301 – どうやってRovioは機械学習を利用してAngry Birdsに雲の中での飛び方を教えるのか #GAM301 #reinvent | Developers.IO

ワークショップで見かけたAVS用デバイスが気になったのでちょっと調べてみた #IOT304 #reinvent | Developers.IO

1つのダッシュボードから300種超のストリーミングサービスを利用できるReelgood | TechCrunch Japan

Magic Leapの最初の製品は売れ行きがあまりにも不振 | TechCrunch Japan

WAFv2のマネージドルールでLFI攻撃をブロックする | Developers.IO

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

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