ホームJavaScriptdidi/LogicFlow
// archived 2026-04-19
didi

LogicFlow

Frontend#JavaScript#TypeScript#Visualization#Diagramming
GitHub で見る →
11,279

// 概要

LogicFlow は、業務システム向けに設計されたフローチャート編集フレームワークであり、一連のコアインタラクションおよび編集機能を提供します。このフレームワークはカスタマイズ性が高く、ユーザーは特定の要件に応じてノード、コネクタ、スタイルを定義できます。さらに、豊富なプラグインメカニズムとデータ変換機能を備えており、さまざまな複雑なフローチャートの開発ニーズを容易に満たします。

// 技術解説

LogicFlow はフローチャート編集に特化したフレームワークであり、ビジネスシステム向けに効率的なプロセス可視化とインタラクション機能を提供するよう設計されています。その中心的な設計思想は高いカスタマイズ性と柔軟性にあり、プラグイン機構やノードのカスタマイズ機能を通じて、複雑なビジネスシナリオにおける開発者の多様なニーズに応えます。このフレームワークはフローチャート描画のインタラクション課題を解決するだけでなく、組み込みの実行エンジンとデータ変換機能を通じてフロントエンドの可視化とバックエンドのビジネスロジックを効果的に接続するため、ノーコードやローコードプラットフォームを構築する際の理想的な選択肢となります。

// 主要ハイライト

01
直感的な可視化インターフェースを提供し、ユーザーが複雑なロジックフローチャートを簡単に作成、編集、管理できるようサポートします。
02
極めて高いカスタマイズ性を備えており、開発者は特定のユースケースに合わせてノード、コネクタ、スタイルをカスタマイズできます。
03
豊富な組み込みプラグインシステムを備え、ユーザーが複雑なプラグインを開発してビジネス機能を拡張することをサポートします。
04
ブラウザ側で動作する組み込み実行エンジンを搭載しており、ノーコードのプロセスロジック実行を実装するための革新的な技術パスを提供します。
05
データ形式の変換をサポートしており、BPMN や Turbo といった様々なバックエンド実行エンジンのデータ構造とシームレスに統合できます。

// ユースケース

01
視覚的なフローチャートの作成と編集
02
高度にカスタマイズ可能なノードおよびスタイルの拡張
03
BPMN などの多様なデータ構造変換のサポート

// クイックスタート

開発者は npm、yarn、または pnpm を介して @logicflow/core および @logicflow/extension パッケージをインストールできます。プロジェクト内にコンテナとなる DOM 要素を作成し、LogicFlow オブジェクトをインスタンス化してコンテナ設定を渡した後、render メソッドを呼び出してノードとエッジのデータを読み込むことで基本的なレンダリングが完了します。