·react-flow
</>

react-flow

existential-birds/beagle

React Flow (@xyflow/react) 用於具有自定義節點和邊的工作流可視化。在構建圖形可視化、創建自定義工作流程節點、實施邊緣標籤或控制視口時使用。在 ReactFlow、@xyflow/react、Handle、NodeProps、EdgeProps、useReactFlow、fitView 上觸發。

207安裝·10熱度·@existential-birds

安裝

$npx skills add https://github.com/existential-birds/beagle --skill react-flow

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 中使用

這個 Skill 的原始碼在哪?

https://github.com/existential-birds/beagle