ブラウザでフローチャートを作れるシンプルなスクリプト・「Flowy」

Flowyはブラウザでフローチャートを作成出来るスクリプトです。シンプルで軽量なコードですがjQueryに依存します

上図のように左ペインからブロックをD&Dで追加、右ペインで各ブロックを編集するUIとなっていますので直感的な操作でフローチャートを作成する事が出来ます

基本的な機能のみの提供で、完成されているようなものでは無いようで、あくまでフローチャートを作成出来る機能を提供するもののようです

Ads

example

var spacing_x = 40;
var spacing_y = 100;
// 初期化
flowy($("#canvas"), drag, release, snapping, spacing_x, spacing_y);

初期化します。例ではブロックサイズを定義していますがデフォルトで設定されています

function snapping(drag) {
//例：ドラッグするブロックを設定
}

機能やブロックの内容を設定します

   $("#remove").on("click", function() {
        flowy.deleteBlocks();
    });

ブロック消去も忘れずに設定してくださいね

flowy.output();
JSON.stringify(flowy.output());

フローチャートのデータはJSONで出力できるみたいです

複雑さもなく使いやすそうな印象でした。ライセンスはMITとの事です