1. 製品
  2.   ダイアグラム
  3.   JavaScript
  4.   Flowy
 
  

Web アプリでフローチャートを作成および編集するための JavaScript ライブラリ

素晴らしいフローチャートを簡単に生成および管理できる Web アプリを作成するためのオープン ソース JavaScript API。

Flowy は、ソフトウェア開発者がフローチャートを簡単に作成および管理するための JavaScript Web アプリを作成できるようにする非常に便利なライブラリです。Flowy.js は非常に優れたユーザー フレンドリーなフローチャート ビルダーであり、他のライブラリと簡単に統合できます。このライブラリは、開発者が自動化ソフトウェア、マインド マッピング ツール、組織図、家系図などを作成するのに役立ちます。この Flowy ライブラリはオープン ソースであり、MIT ライセンスの下で利用できるため、自由に使用できます。

Flowy ライブラリは、フローチャートを簡単に表示できるだけでなく、優れたインターフェイス、多数のカスタマイズ オプション、ジェスチャ イベント リスナー、その他の優れた機能を備えた完全なドラッグ アンド ドロップ エディターもサポートしています。これらの機能には、自動スナップ サポート、自動スクロール、ブロックの再配置、ブロックの選択と削除、自動ブロック中央揃え、既存ファイルのインポートと使用、モバイル サポート、ブロックの簡単な作成、条件付きスナップなどがあります。

Previous Next

Flowy を使い始める

Flowy ライブラリをインストールするには、NPM を使用することをお勧めします。スムーズにインストールするには、次のコマンドを使用してください

NPM 経由で Flowy をインストールする

  npm install flowy

GIT リポジトリ経由で Flowy をクローンする

  git clone https://github.com/alyssaxuu/flowy.gitt

JavaScript でドラッグ アンド ドロップを使用してフローチャートを作成する

Flowy ライブラリを使用すると、ソフトウェア開発者は JavaScript アプリ内で新しいフローチャートを作成できます。ライブラリには、ドラッグ アンド ドロップ機能を使用してレスポンシブでプロフェッショナルなフローチャートを作成するためのサポートが含まれています。まず、フローチャートを保持する要素を作成する必要があります。その後、ドラッグ アンド ドロップでフローチャートに挿入できる定義済みのブロックを作成する必要があります。要素間のスペースの管理、ブロックの移動、ブロックの編集、不要なブロックの削除など、簡単に変更を加えることができます。

無料の JavaScript ライブラリを使用してフローチャートを作成する


        // Initialize the flowchart on the canvas div
        const canvas = document.getElementById('canvas');
        flowy(canvas);

        // Create some nodes and connect them
        const node1 = flowy.add_node('Start', 'node-1');
        const node2 = flowy.add_node('Process', 'node-2');
        flowy.connect(node1, node2);

        // Add some properties to nodes
        flowy.set_property(node1, 'color', 'blue');
        flowy.set_property(node2, 'text', 'Hello World');

        // Serialize and log the flowchart
        document.getElementById('serialize').addEventListener('click', () => {
            console.log(flowy.serialize());
        });

        // Load the serialized flowchart
        document.getElementById('load').addEventListener('click', () => {
            const json = prompt('Enter JSON:');
            flowy.load(json);
        });

JavaScript によるノードの追加と管理

オープンソースの Flowy ライブラリには、JavaScript アプリケーション内でプログラムによって新しいノードを追加するためのサポートが含まれています。このライブラリを使用すると、ソフトウェア プログラマーは最初にブロックを設計し、その後、設計ファイルを簡単にエクスポートして、サポートされているファイル形式で保存できます。また、ソフトウェア開発者は、数行のコードで既存のブロックをインポートし、変更を加えて、選択した場所に保存し直すことができます。Flowy チームは、ダイアグラムの動的生成にも取り組んでおり、まもなくその一部となる予定です。

JavaScript ライブラリを使用してフローチャートに新しいノードを追加する方法

// create a new instance of the Flowy library
const canvas = document.getElementById("canvas");
const flowy = new Flowy(canvas);

// add a new node to the canvas

const node = flowy.addNode({
  text: "New Node",
  x: 100,
  y: 100,
  draggable: true,
  resizable: true,
  deletable: true,
});

JavaScript 経由でフローチャートのデータをインポートする

オープンソースの Flowy ライブラリを使用すると、ソフトウェア開発者は独自のアプリケーション内でフローチャートのデータをインポートできます。ライブラリには、フローチャート全体を簡単にインポートするためのサポートが含まれています。この方法を使用する場合は、入力が絶対に信頼できることを確認してください。そうしないと、この方法によってシステムに脆弱性が生じる可能性があります。また、フローチャート データをオブジェクトとしてだけでなく JSON 文字列としても取得できます。

JavaScript API を使用してフローチャートのデータをインポートする方法

const canvas = document.getElementById('canvas');
const flowy = new Flowy(canvas);

const data = {
  nodes: [
    { id: "node1", content: "Start", x: 100, y: 100 },
    { id: "node2", content: "Step 1", x: 250, y: 100 },
    { id: "node3", content: "Step 2", x: 250, y: 200 },
    { id: "node4", content: "End", x: 400, y: 150 }
  ],
  edges: [
    { source: "node1", target: "node2" },
    { source: "node2", target: "node3" },
    { source: "node3", target: "node4" }
  ]
};

flowy.load(data);
 日本