FlowGram.AI：ノードワークフローを迅速に作成するオープンソースエンジン

はじめに

Flowgram.aiは、ByteDanceによって開発されたオープンソースのプロセス構築エンジンです。ノード編集をベースとしており、固定レイアウトとフリーワイヤーモードの両方をサポートすることで、開発者がワークフローを素早く作成できるよう支援する。Flowgram.aiは直感的なインターフェースとスムーズなインタラクティブ体験を提供し、明確なインプットとアウトプットを持つビジュアルなワークフローを設計できる。また、プロセスインテリジェンスを強化するためにAI機能を組み込む予定だ。ユーザーは公式デモを通じてオンラインで体験することも、ローカルにインストールすることもできる。

機能一覧

• ノードエディタノードとリンケージをドラッグ＆ドロップして、ワークフローをすばやく構築できます。
• デュアルモード対応固定レイアウトとフリーリンクの両方の編集が可能。
• インタラクティブ体験アニメーショントランジション、ジェスチャーズーム、アンドゥ・リドゥなどをサポート。
• AIの可能性プロセス・インテリジェンス分析を強化するためにAIを統合する計画。
• オープンソース・エクステンションコード公開と開発者によるカスタマイズのサポート。
• 輸出オプションワークフローは、画像またはコードとしてエクスポートできます。

ヘルプの使用

Flowgram.aiは開発者向けツールであり、オンラインデモで体験することも、インストールしてローカルで実行することもできる。以下は、使い方の詳細ガイドである。

始め方

Flowgram.aiには、オンラインデモとローカルインストールの2つの使用方法がある。

オンライン体験

1. ブラウザを開き、公式デモにアクセスする：
   • 固定レイアウト：https://flowgram.ai/examples/fixed-layout/fixed-feature-overview.html
   • 無料コネクションhttps://flowgram.ai/examples/free-layout/free-feature-overview.html
2. キャンバスに入れば、インストール不要で直接操作できる。

ローカルインストール

1. 環境を整える::
   • Node.js 18+をインストールして実行する：nvm install lts/hydrogenデフォルトのバージョンを設定する：nvm alias default lts/hydrogenスイッチング：nvm use lts/hydrogen.
   • グローバルな依存関係をインストールします：npm i -g pnpm@9.12.0 @microsoft/rush@5.140.0.
2. クローン倉庫::
   • 走っている：git clone git@github.com:bytedance/flowgram.ai.git.
3. 依存関係のインストール::
   • フォルダに移動する：cd flowgram.ai.
   • 依存関係を更新する：rush update.
4. プロジェクトの構築::
   • 走っている：rush build.
5. デモの実行::
   • ドキュメンテーションrush dev:docs.
   • 固定レイアウトのデモrush dev:demo-fixed-layout.
   • 無料コネクション・デモ：rush dev:demo-free-layout.
6. ブラウザからアクセス http://localhost(ログでポート確認）。

npxによるクイック・インストール

• 走っている：npx @flowgram.ai/create-app@latest.
• デモを選択する：
  • fixed-layout固定レイアウトのベストプラクティス。
  • free-layoutフリーレイアウトのベストプラクティス。
  • fixed-layout-simple固定レイアウトの基本的な使い方。
  • free-layout-simpleフリーレイアウトの基本的な使い方。

npm経由でモジュールをインストールする

• レイアウトエディタを修正：npm install @flowgram.ai/fixed-layout-editor.
• フリーリンク編集部npm install @flowgram.ai/free-layout-editor.

主な機能

ワークフローの作成

• 編集インターフェイスに入ると、左のツールバーにノードのタイプ（条件付き、周期的など）が表示される。
• ノードをキャンバスにドラッグし、入力（例えば "Start"）をダブルクリックする。
• ノードを矢印で結んで完成。

固定レイアウトモード

• 固定レイアウトのデモを開くか、以下を実行する。 fixed-layout.
• ノードの位置は固定され、指定した位置へのドラッグ＆ドロップをサポートする。
• ブランチとループを追加でき、右側のパネルでスタイルを調整できる。

フリーワイヤーモード

• フリーリンクデモを開くか、以下を実行する free-layout.
• 節点は任意に配置でき、接続線も自由に引ける。
• 自動照合機能、吸着アライメント機能をサポート。

インタラクティブ機能

• ズーム・ドラッグMacのトラックパッドで2本指ズームし、スペースキーを押してキャンバスをドラッグします。
• アニメーション・トランジション線はノードの動きに合わせて滑らかに変化する。
• アンドゥCtrl+ZとCtrl+Yで操作。
• コピー＆ペーストボックス・ノード、Ctrl+Cコピー、Ctrl+Vペースト。

注目の機能

デュアルモードデザイン

固定レイアウトは、プロジェクト計画などの構造化されたプロセスに適しており、ノードの位置が固定され、分岐や折りたたみがサポートされています。自由リンクは、マインドマップのような柔軟な設計に適しており、ノードの位置は任意で、自由にリンクすることができます。

AIイネーブル

Flowgram.aiは、流路の自動最適化などのAI機能を導入する予定だ。現在開発中なので、詳細はGitHubをチェックしてほしい。

オープンソース・サポート

開発者はコードを修正することができる。例えば、新しいノード・タイプを追加するには、単に @flowgram.ai/free-layout-editor パッケージに入れて提出する。

ほら

• オンライン・デモは保存をサポートしていないので、全機能を体験するにはローカルにインストールする必要がある。
• 依存関係の最初のインストールにはインターネット接続が必要で、時間がかかる場合があります。
• 公式文書(https://flowgram.ai/詳細はGitHubを参照されたい。 README.md.

これらのステップで、Flowgram.aiを使ったワークフローを素早く構築することができます。

アプリケーションシナリオ

1. プロジェクト管理
   ステップと役割分担を明確に示す固定レイアウトでタスクフローを設計する。
2. ソフトウェア開発
   データの流れを示すために、自由連結線を使用してコードのフローチャートを描く。
3. ティーチング・デモンストレーション
   教師はノードベースのワークフローを使ってコンセプトを説明し、エクスポートして生徒と共有する。

品質保証

1. Flowgram.aiは無料ですか？
   そう、これはオープンソースのプロジェクトであり、コードは自由に使えるし、機能は自分でデプロイする必要がある。
2. 中国語に対応していますか？
   ノードのコンテンツは中国語入力に対応し、インターフェースは英語である。
3. ワークフローを保存する方法は？
   オンラインデモは保存できませんが、ローカル版は画像やコードをエクスポートできます。