非エンジニアとの認識のズレに悩んでいたが、Flydeで解決した

はじめに

プロダクトマネージャーやデザイナーに「このAPIの処理フローはこうなっています」と説明するとき、コードを見せても伝わらず、結局ホワイトボードに図を描き直した経験はありませんか。逆にエンジニア側も、口頭やSlackで伝えられた仕様をコードに落とし込む過程で、細かい分岐やエラー処理の認識がズレてしまうことがよくあります。

そのギャップを埋めてくれるのが、今回紹介するFlydeです。バックエンドのロジックを視覚的なフローとして表現しながら、実体は既存のTypeScript/JavaScriptコードベースに統合されるため、非技術者と一緒に同じ画面を見ながら仕様を詰めていくことができます。筆者もAPIのオーケストレーション処理を可視化する用途で触ってみましたが、「コードを読める人だけが仕様を把握できる」という状態から抜け出せる感触がありました。

Flydeとは

Flydeは、バックエンドロジック向けのオープンソースなビジュアルプログラミングツールです。ノードを線でつないでフローを組み立てるという点ではNode-REDなどのフロー型ツールに近いですが、Flydeは既存のNode.jsプロジェクトに組み込んで使うことを前提に設計されており、フローの中からTypeScriptで書いた自作の処理（カスタムノード）を呼び出せるのが大きな特徴です。開発はflydelabs/flydeで進められており、VSCode拡張機能やブラウザ上のプレイグラウンドも用意されています。

主な特徴

既存コードベースとの統合 - フローはYAML形式の.flydeファイルとして保存され、Node.jsプロジェクトの一部としてバージョン管理・実行できます
技術者・非技術者の協業 - プロダクトマネージャーやデザイナーもビジュアルエディタ上でフローを確認・編集でき、仕様のすり合わせがスムーズになります
TypeScriptによる拡張性 - CodeNodeとしてTypeScriptで独自のロジックを書き、フロー上のノードとして再利用できます
AIワークフローとの相性 - プロンプトチェーンやマルチステップのAIエージェント処理など、順序や分岐が複雑になりがちな処理の見通しを良くできます
VSCode統合 - 公式拡張機能（flyde.flyde-vscode）でエディタ内にフローエディタとビジュアルデバッガーが表示され、実行中のデータの流れを確認できます

インストール

CLIを使って新規プロジェクトを作成するのが最も手軽な方法です。

# 新規プロジェクトを作成する場合
npx create-flyde-app my-flyde-app
cd my-flyde-app

既存のNode.js/TypeScriptプロジェクトに組み込む場合は、コアパッケージとローダーを追加します。

# npmの場合
npm install @flyde/core @flyde/loader

# yarnの場合
yarn add @flyde/core @flyde/loader

VSCodeでビジュアルエディタを使う場合は、拡張機能マーケットプレイスで「Flyde」を検索してインストールしてください。

基本的な使い方

Flydeでは、まずTypeScriptでフロー上から使える処理（カスタムノード）を定義します。以下は摂氏を華氏に変換するシンプルなノードの例です。

// nodes/CelsiusToFahrenheit.ts
import { CodeNode } from "@flyde/core";

export const CelsiusToFahrenheit: CodeNode = {
  id: "CelsiusToFahrenheit",
  displayName: "Celsius to Fahrenheit",
  description: "摂氏温度を華氏温度に変換します",
  inputs: {
    celsius: { description: "摂氏温度" },
  },
  outputs: {
    fahrenheit: { description: "華氏温度" },
  },
  run: (inputs, outputs) => {
    const { celsius } = inputs;
    outputs.fahrenheit.next((celsius * 9) / 5 + 32);
  },
};

このノードをVSCode拡張機能やプレイグラウンド上のビジュアルエディタに配置し、入力ノードや他の処理ノードと線でつなぐことでフロー（.flydeファイル）が完成します。完成したフローは、Node.js側から次のように呼び出します。

// index.ts
import { loadFlow } from "@flyde/loader";

async function main() {
  const execute = await loadFlow("./flows/TemperatureConverter.flyde");

  const { result } = execute(
    { celsius: 25 },
    {
      onOutputs: (key, value) => {
        console.log(`[${key}]`, value);
      },
    }
  );

  await result;
}

main();

loadFlowで.flydeファイルを読み込み、返ってきた実行関数に入力値を渡すだけで、フロー全体を通常の非同期処理として呼び出せます。onOutputsコールバックを使えば、フロー内の各ノードが出力した値をリアルタイムに確認できるため、デバッグ時にも重宝します。

実践的なユースケース

Flydeが特に力を発揮するのは、次のような場面です。

APIオーケストレーションの可視化 - 複数の外部APIを順番/並列に呼び出して結果を組み合わせる処理を、フローとして俯瞰できるようにします。エラー時の分岐やリトライ処理も視覚的に追加できます
AIエージェントのプロンプトチェーン管理 - 「入力の前処理 → LLM呼び出し → 出力の検証 → 後処理」といった多段階の処理を、各ステップをノードとして分離しながら組み立てられます
業務ロジックの仕様共有 - 割引計算やステータス遷移など、非エンジニアも関わる業務ルールをフローとして可視化し、実装とドキュメントを一体化できます
段階的なプロトタイピング - まずはビジュアルエディタでフローの骨格を組み、細部の処理だけTypeScriptのカスタムノードとして実装していくことで、素早く動くものを作れます

いずれのケースでも、フローそのものがコードベースの一部としてバージョン管理される点がポイントです。「図はドキュメント、実装は別」という状態にならず、フローを見ればそのまま実際の挙動が分かります。

まとめ

Flydeは、ビジュアルプログラミングの分かりやすさと、TypeScriptによる拡張性・既存コードベースとの統合を両立させたツールです。フローチャートを描いて満足するのではなく、そのフロー自体が実際に動くコードになるという点が、他のノーコード/ローコードツールとの大きな違いだと感じました。

まずはnpx create-flyde-appでサンプルプロジェクトを立ち上げ、VSCode拡張機能でビジュアルエディタとデバッガーを試してみるのがおすすめです。API連携やAIエージェントのように処理の流れが複雑になりがちな箇所から少しずつ導入してみると、Flydeの良さを実感しやすいはずです。