didi/LogicFlow

これは何？

主な機能

• 01ドメイン固有の図を作成できる、カスタマイズ可能なノード、エッジ、スタイル。
• 02公式の拡張パッケージやレイアウトパッケージを備えたプラグインシステム。
• 03図のデータをBPMNおよびTurbo形式との間で変換。
• 04ブラウザー上でフローチャートのロジックを実行する組み込みエンジン。
• 05キャンバス型エディターでSVGによる描画を採用。

ユースケース

• 社内の業務システムにフローチャートや承認プロセスの設計機能を追加する。
• 共通の図作成基盤を使って、ER図、UML、マインドマップのエディターを構築する。
• ビジュアルなワークフローをBPMNにエクスポートし、バックエンドのワークフローエンジンで利用する。
• シンプルなフローチャートのロジックをブラウザー上で直接実行する。

クイックスタート

1. 1

   npmでコアパッケージと拡張パッケージをインストールします

   npm install @logicflow/core @logicflow/extension --save
2. 2

   HTMLページにコンテナ要素を追加します

3. 3

   コンテナを指定してLogicFlowインスタンスを作成し、データをレンダリングします

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

• !TypeScriptまたはJavaScriptを使用するブラウザベースのフロントエンド環境が必要です。

収録されている特集

トピック

よくある質問

LogicFlow とは？

フローチャートやマインドマップ、ER図、BPMN図などのカスタマイズ可能な図エディターを業務システムに組み込むための、TypeScript製フレームワーク。 LogicFlowは、フローチャート形式の図に必要な操作・編集機能を備えたフレームワークです。エディターをゼロから開発することなく、独自の業務システムに組み込めます。ノードとエッジを配置するキャンバスに加え、カスタムノード、コネクター、スタイル、プラグイン向けの拡張ポイントも用意されています。

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

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

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

活発にメンテナンス中。LogicFlow の最終コミットは 2026年10月24日 です。

LogicFlow は何に使えますか？

社内の業務システムにフローチャートや承認プロセスの設計機能を追加する。 共通の図作成基盤を使って、ER図、UML、マインドマップのエディターを構築する。 ビジュアルなワークフローをBPMNにエクスポートし、バックエンドのワークフローエンジンで利用する。 シンプルなフローチャートのロジックをブラウザー上で直接実行する。

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

npmでコアパッケージと拡張パッケージをインストールします: npm install @logicflow/core @logicflow/extension --save HTMLページにコンテナ要素を追加します コンテナを指定してLogicFlowインスタンスを作成し、データをレンダリングします

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

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