14 個のオープンソース JavaScript フローチャートコンポーネント

人間社会の活動において、プロセスは至る所に存在します。日々の仕事、銀行取引、料理、着替えなど、すべてに特定の業務プロセスが存在します。人間の生、老、病、死というサイクルもプロセスです。ソフトウェアの実行プロセスもまたプロセスです。多くのソフトウェアプログラムは、ルールベースの実行方法と、環境やデータなどの外部情報によってトリガーされるイベントを備えていますが、ソフトウェア全体の観点から見ると、それらは依然として特定のビジネスプロセスに従っています。これらのルールやトリガーは、プロセス全体における機能ポイントです。

ソフトウェア開発において、プロセス指向設計には、ローコードおよびノーコード開発、オフィス自動化タスクのオーケストレーション、自動レビューおよび承認、プロセス指向 AI エージェント (Dify や Coze に類似) など、多くの用途があります。

人気のあるオープンソースのフローチャートコンポーネント (flowchart.js、xyflow、GoJS、Dgrm.net など) では、フローチャートデザイナーを視覚的に Web アプリケーションに統合できるため、システムの使いやすさが大幅に向上し、より直感的でユーザーフレンドリーになります。

以下に、Webベースのオープンソースワークフロー設計コンポーネントをいくつかご紹介します。ニーズに合わせて適切なコンポーネントを選択し、システムに統合してください。

1.フローチャート.js

https://github.com/adrai/flowchart.js

flowchart.js は、ブラウザとターミナルで実行できるフローチャート用の DSL および SVG レンダラーです。このデザイナーでは、ノードと接続が個別に定義されるため、ノードの再利用と接続の迅速な変更が可能です。ノードと接続のスタイルは DSL 内で変更することもできます。

2.jquery.フローチャート.js

https://github.com/sdrdis/jquery.flowchart

jquery.flowchart.jsはオープンソースのjQuery UIフローチャートプラグインです。主な機能は以下のとおりです。

ボックス (演算子と呼ばれる) とそれらの間の接続を描画します。
エンドユーザーが演算子を追加/移動/削除したり、演算子間の接続を作成/削除したりしてフローチャートを編集できるメソッドが提供されます。
開発者はフローチャートを保存/読み込むことができます。
演算子とリンクは、CSS とプラグインパラメータを使用してカスタマイズできます。
一部のメソッドでは、ビューのパンやズーム、ドラッグアンドドロップを使用した演算子の追加など、高度な機能を追加できます。

3. 流れるような

https://github.com/alyssaxuu/flowy

Flowyは、フローチャート対応のウェブアプリを驚くほど簡単に作成できるツールです。このライブラリをプロジェクトに実装することで、自動化されたマインドマッピングツールやシンプルなプログラミングプラットフォームを数分で構築できます。

主な機能は次のとおりです。

レスポンシブなドラッグアンドドロップ
自動キャプチャ
自動スクロール
ブロックの再配置
ブロックを削除
自動ブロックセンタリング
条件付きキャプチャ
条件付きブロックの削除
保存したファイルをインポートする
モバイルサポート
バニラJavaScript（依存関係なし）

4.Dgrm.net

https://github.com/AlexeyBoiko/DgrmJS

Dgrm.netは純粋なJavaScriptフローチャートエディタです。デスクトップ、スマートフォン、タブレットで動作し、他のアプリケーションとの依存関係はありません。

5. ドローフロー

https://github.com/jerosoler/Drawflow

Drawflow は、データフローを簡単かつ迅速に作成できるオープンソースのプロセスデザイナーです。

主な機能は次のとおりです。

ドラッグ可能なノード
複数の入力/出力
複数の接続
ノードと接続の削除
入力/出力の追加/削除
接続の再ルーティング
ノード上のデータ同期
ズームイン/ズームアウト
クリアデータモジュール
サポートモジュール
エディターモード: 編集、固定、または表示
データのインポート/エクスポートをサポート
サポートイベント
モバイルデバイスをサポート
バニラJavaScript（依存関係なし）
NPMに基づく
VueコンポーネントとNuxtをサポート

6.xyflow

https://github.com/xyflow/xyflow

これは、React または Svelte 開発ワークフローに基づいて UI を設計するための強力なオープンソースライブラリです。すぐに使用でき、無制限にカスタマイズできます。

このライブラリのデモは多数あります: https://reactflow.dev/showcase

7. ゴーJS

https://github.com/NorthwoodsSoftware/GoJS

GoJSは、データの視覚化、描画ツール、グラフエディタなど、様々な種類のインタラクティブなダイアグラムを作成できる柔軟性の高いツールです。フローチャート、組織図、BPMN（ビジネスプロセス管理）ダイアグラム、スイムレーン、タイムライン、状態遷移図、カンバンボード、ネットワーク、マインドマップ、サンキーダイアグラム、家系図、フィッシュボーンダイアグラム、フロアプラン、UMLダイアグラム、決定木、PERTチャート、ガントチャートなど、数百種類のダイアグラムがサポートされています。GoJSには、ツリーレイアウト、ヒートマップ、円形および階層型の有向グラフレイアウトなど、多数のレイアウトが組み込まれており、カスタムレイアウトもサポートされています。

GoJSはHTML上でCanvas要素（SVGまたは画像形式でエクスポート）として、または直接SVG DOMとしてレンダリングされます。GoJSはWebブラウザだけでなく、Node.jsやPuppeteerでも実行できます。GoJSのグラフはモデルに基づいており、通常はJSONテキストとして保存および読み込みされます。

さまざまな GoJS デモは次の URL で見つかります: https://gojs.net/latest/samples/index.html

8. Reactダイアグラム

https://github.com/projectstorm/react-diagrams

React Diagrams は、React で書かれた非常に簡潔なワークフローグラフライブラリです。

9.フローチャートReact

https://github.com/joyceworks/flowchart-react

これは、React.js 用の無料かつオープンソースの軽量フローチャートデザイナーです。

10. Reactフローチャート

https://github.com/MrBlenny/react-flow-chart

React Flow Chart は、無料、オープンソース、柔軟性、ステートレス、宣言型の React フローチャートライブラリです。

11. リアフロー

https://github.com/reaviz/reaflow

REAFLOWは、静的またはインタラクティブなエディターを構築するためのモジュール式チャートエンジンです。この機能豊富なモジュール式ライブラリは、複雑なビジュアライゼーションを完全なカスタマイズ性で表示することを可能にします。

12. Reactフローチャートエディタ

https://github.com/aislelabs/react-flowchart-editor

このオープンソースのフローチャートエディタは、ウィンドウの配置、ズーム、ワークスペースのパンをサポートしています。シンプルなコンポーネントプラグインアーキテクチャにより、簡単にカスタマイズできます。追加のパッケージ依存関係はありません。

13. Reactフローチャートビルダー

https://github.com/TaqBostan/react-flowchart-builder

これは無料の軽量フローチャートコンポーネントです。

その機能は次のとおりです:

さまざまな形状のノードをサポートします。
ノードの追加/削除/移動をサポート
ノード間のリンクの追加/削除/再形成をサポート
リンクの追加/編集/削除の有効化/無効化をサポート
スケーリングとパンをサポート
生または型付きの入力/出力

14. XフローチャートVue

https://github.com/OXOYO/X-フローチャート-Vue

G6 と Vue をベースにしたビジュアルグラフィカルエディター。

DUICUO