React Flow (@xyflow/react) لتصور سير العمل باستخدام العقد والحواف المخصصة. يُستخدم عند إنشاء تصورات الرسم البياني، أو إنشاء عقد سير عمل مخصصة، أو تنفيذ تسميات الحواف، أو التحكم في إطار العرض. المشغلات على ReactFlow، @xyflow/react، Handle، NodeProps، EdgeProps، useReactFlow، fitView.
ثبّت مهارة الذكاء الاصطناعي react-flow بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: existential-birds/beagle.
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.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/existential-birds/beagle --skill react-flowReact Flow (@xyflow/react) لتصور سير العمل باستخدام العقد والحواف المخصصة. يُستخدم عند إنشاء تصورات الرسم البياني، أو إنشاء عقد سير عمل مخصصة، أو تنفيذ تسميات الحواف، أو التحكم في إطار العرض. المشغلات على ReactFlow، @xyflow/react، Handle، NodeProps، EdgeProps، useReactFlow، fitView. المصدر: existential-birds/beagle.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/existential-birds/beagle --skill react-flow بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/existential-birds/beagle