react-flow

To build a node-based workflow visualization in React, use this Skill to render interactive graph editors with custom nodes, edges, and viewport manipulation capabilities. It requires the @xyflow/react library to manage and render the graph elements.

Yes, you can create custom node and edge types for your React diagrams. This Skill supports building unique visual elements for your graphs, allowing you to define custom nodes and edges to represent complex data flows.

The best way to manage state in a React flow editor is to use the programmatic state management features provided by this Skill. It allows you to control and update the flow's state programmatically, ensuring your node-based interface reacts correctly to user input.

Yes, you need @xyflow/react to build interactive node graphs with this Skill. The Skill relies on the library's underlying functionality to handle the rendering and management of graph elements within your React application.

You control the viewport when rendering complex node-based UI by using the built-in viewport control features. This allows users to easily navigate, pan, and zoom across large visual programming interfaces and complex diagrams.

Use cases for a node-based graph workflow editor include building visual blueprint editors for data processing pipelines, where each node represents a processing step and edges show the data flow. It is also used for creating visual programming interfaces.