flowy は無料で使えますか？ライセンスは？

flowy は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

flowy は今もメンテナンスされていますか？

半年以上コミットなし。flowy の最終コミットは 2024年7月13日です。

flowy は何に使えますか？

Webアプリで自動化ツールやワークフロービルダーを構築するノードを接続するマインドマップや図表ツールを作成するシンプルなビジュアルプログラミングインターフェースを試作する

flowy のインストール方法は？

jsDelivrからスタイルシートを読み込む: jsDelivrからスクリプトを読み込む: ページにcanvas要素とドラッグ可能なブロックを作成する canvas上でFlowyを初期化する: flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);

flowy はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/alyssaxuu/flowy

alyssaxuu/flowy

Q: flowy は今もメンテナンスされていますか？

半年以上コミットなし。flowy の最終コミットは 2024年7月13日 です。

Webアプリ向けの、ドラッグ操作とスナップに対応したフローチャートエディターを作る軽量なVanilla JavaScriptライブラリ。

GitHub で見る

スター: 12,143
フォーク: 1,043
未解決の Issue: 59
最終コミット: 2 年前

これは何？

Flowyは、Webページにフローチャート機能を追加できる、依存関係のないJavaScriptライブラリです。要素にcreate-flowyクラスを付けてドラッグ可能なブロックとして定義し、canvas要素に配置すると、ユーザーはブロックをcanvas上へドラッグできます。ブロックは親ブロックにスナップし、接続された分岐を形成します。

grab、release、snap、rearrangeの各イベントに対応するコールバックが用意されており、接続を許可または拒否したり、ユーザー操作に応じて処理を実行したりできます。フローチャートの状態はflowy.output()でJSON構造として書き出し、後でflowy.import()で復元できます。ただし、importメソッドは生のHTMLを挿入するため、信頼できる入力にのみ使用してください。複数のブロックはflowy.deleteBlocks()でまとめて削除できますが、個別のブロック削除には対応していません。

現在はjsDelivr経由でJavaScriptファイルとCSSファイルを読み込んで導入でき、モバイルデバイスでも動作します。npmでのインストールは、現時点では未対応とされています。

主な機能

01ドラッグ＆ドロップでブロックを配置でき、自動でスナップして中央揃え
02grab、release、snap、rearrangeイベント用のコールバック
03条件付きのスナップとブロック削除
04フローチャートデータをJSONとして書き出し・読み込み
05外部依存なしでモバイルでも動作

ユースケース

Webアプリで自動化ツールやワークフロービルダーを構築する
ノードを接続するマインドマップや図表ツールを作成する
シンプルなビジュアルプログラミングインターフェースを試作する

クイックスタート

1
jsDelivrからスタイルシートを読み込む
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css">
2
jsDelivrからスクリプトを読み込む
<script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script>
3
ページにcanvas要素とドラッグ可能なブロックを作成する
4
canvas上でFlowyを初期化する
flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);

使う前に知っておきたいこと

npmでのインストールにはまだ対応していません。CDNリンクを使用するか、ファイルをコピーしてください。
ブロックを個別に削除することはできません。一度にすべてのブロックを削除することのみ可能です。
インポートメソッドはHTMLをサニタイズしないため、信頼できない入力を使用するとXSSの脆弱性があります。

トピック

#flowchart #drag-and-drop #javascript #diagrams #visual-programming #vanilla-js #engine #javascript-library #marketing #marketing-automation

よくある質問

flowy とは？: Webアプリ向けの、ドラッグ操作とスナップに対応したフローチャートエディターを作る軽量なVanilla JavaScriptライブラリ。 Flowyは、Webページにフローチャート機能を追加できる、依存関係のないJavaScriptライブラリです。要素にcreate-flowyクラスを付けてドラッグ可能なブロックとして定義し、canvas要素に配置すると、ユーザーはブロックをcanvas上へドラッグできます。ブロックは親ブロックにスナップし、接続された分岐を形成します。
flowy は無料で使えますか？ライセンスは？: flowy は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
flowy は今もメンテナンスされていますか？: 半年以上コミットなし。flowy の最終コミットは 2024年7月13日です。
flowy は何に使えますか？: Webアプリで自動化ツールやワークフロービルダーを構築するノードを接続するマインドマップや図表ツールを作成するシンプルなビジュアルプログラミングインターフェースを試作する
flowy のインストール方法は？: jsDelivrからスタイルシートを読み込む: <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css"> jsDelivrからスクリプトを読み込む: <script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script> ページにcanvas要素とドラッグ可能なブロックを作成する canvas上でFlowyを初期化する: flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);
flowy はどこで入手できますか？: ソースコードとインストール手順は GitHub にあります：https://github.com/alyssaxuu/flowy

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。