skills.rest
gengirish
gengirishCOMMUNITY
Explore all skills by this author →
GitHub

react-flow-workflows

Build React Flow DAG editors and live workflow run visualizations with @xyflow/react.

Updated Mar 31, 2026
Search Tags:#data visualization#sse#dag#react flow#dagre#xyflow#workflow editor
One-click install
npx skills add https://github.com/gengirish/dropflow --skill react-flow-workflows-gengirish
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-flow-workflows
Source: https://github.com/gengirish/dropflow/tree/main/.cursor/skills/react-flow-workflows
Command: npx skills add https://github.com/gengirish/dropflow --skill react-flow-workflows-gengirish

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @xyflow/react, dagre.

What problem does it solve? Building a workflow builder UI or visualizing workflow run progress requires converting DAG definitions into interactive node-edge graphs, which involves custom node components, edge mapping, real-time status updates, and layout logic that is tedious to write from scratch. ## Core Features & Use Cases - DAG Conversion: Transform WorkflowDefinition.dagJson steps with dependsOn relationships into React Flow nodes and edges. - Custom Step Nodes: Render workflow steps with type-specific icons and color-coded status indicators (completed, running, failed). - Live Run Visualization: Subscribe to SSE workflow events and update node statuses in real time during execution. - Auto-Layout: Use dagre to automatically position nodes in a top-to-bottom ranked layout. - Use Case: When building the settings/workflow pages of a Next.js app, generate a full workflow editor with Background, Controls, and MiniMap, then watch a live run animate step statuses as events stream in. ## Quick Start Ask the AI to create a React Flow workflow editor component that renders the DAG from a workflow definition and updates node statuses live from SSE events.

Frequently Asked Questions about react-flow-workflows

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a workflow DAG definition into React Flow nodes and edges?▼

Map each DAG step to a node with id, type, position, and data fields, then create edges from each step's dependsOn array linking prerequisite step IDs to the current step. The dagToReactFlow function in this Skill performs exactly this transformation.

How to visualize live workflow run progress in React Flow?▼

Subscribe to SSE workflow events and update node data.status when a WORKFLOW_STEP event matches the run ID. React Flow re-renders nodes automatically, showing color-coded statuses like running, completed, or failed.

How do I auto-layout React Flow nodes with dagre?▼

Create a dagre graph, register each node with fixed width and height, add edges, then run dagre.layout with rankdir TB. Read back the computed positions and offset by half the node dimensions to center them.

Does @xyflow/react support custom node components?▼

Yes, @xyflow/react supports custom nodes via the nodeTypes prop. Define a component receiving NodeProps, render Handle elements for source and target connections, and register it under a type key like workflowStep.

What package replaced reactflow for React Flow v12?▼

The reactflow package was renamed to @xyflow/react for version 12. Install it with pnpm add @xyflow/react and import ReactFlow, Background, Controls, and MiniMap from the new package name.

Related Skills

Explore More Software Engineering Skills→
ivanyeorsivanyeors

content-model

Define content types, fields, metadata, and relationships for CMS data structures.

Community
Intermediate
indiesoftbyindiesoftby
81

defold-project-build

Trigger Defold editor builds via HTTP and report results.

Official
Advanced
supportersimulatorsupportersimulator
2

fleet-events

Stream fleet activity events from EventBus via WebSocket and SSE endpoints.

Community
Intermediate
HybridAIOneHybridAIOne
126

diagram

Generate and validate diagram-as-code artifacts in Mermaid, PlantUML, Graphviz DOT, or Excalidraw JSON.

Official
Advanced