react-flow
✓カスタム ノードとエッジを使用したワークフロー視覚化のための React Flow (@xyflow/react)。グラフ視覚化の構築、カスタム ワークフロー ノードの作成、エッジ ラベルの実装、またはビューポートの制御を行うときに使用します。 ReactFlow、@xyflow/react、Handle、NodeProps、EdgeProps、useReactFlow、fitView でトリガーします。
SKILL.md
React Flow (@xyflow/react) is a library for building node-based graphs, workflow editors, and interactive diagrams. It provides a highly customizable framework for creating visual programming interfaces, process flows, and network visualizations.
Nodes are the building blocks of the graph. Each node has:
Handles are connection points on nodes. Use Position enum for placement:
カスタム ノードとエッジを使用したワークフロー視覚化のための React Flow (@xyflow/react)。グラフ視覚化の構築、カスタム ワークフロー ノードの作成、エッジ ラベルの実装、またはビューポートの制御を行うときに使用します。 ReactFlow、@xyflow/react、Handle、NodeProps、EdgeProps、useReactFlow、fitView でトリガーします。 ソース: existential-birds/beagle。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/existential-birds/beagle --skill react-flow- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
react-flow とは？
カスタム ノードとエッジを使用したワークフロー視覚化のための React Flow (@xyflow/react)。グラフ視覚化の構築、カスタム ワークフロー ノードの作成、エッジ ラベルの実装、またはビューポートの制御を行うときに使用します。 ReactFlow、@xyflow/react、Handle、NodeProps、EdgeProps、useReactFlow、fitView でトリガーします。 ソース: existential-birds/beagle。
react-flow のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/existential-birds/beagle --skill react-flow インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/existential-birds/beagle
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-01