ReactFlow Prototype

This repository contains a complex implementation of ReactFlow using the free version of @xyflow/react, showcasing advanced features such as custom nodes, custom edges, connection validation and complex grouping of elements.

Features

• Custom Nodes: This project demonstrates how to create custom nodes with advanced styles and logic.
• Custom Edges: The custom edges provide dynamic behavior with interactive and visually appealing connections.
• Complex Grouping: Nodes and edges are grouped into logical units, making it easy to manage large flows.
• Connection Validation: When two nodes are connected by edges, validation is required. For example, self-connections are not allowed for nodes, etc.
• Interactive Design: Users can interact with the flow by dragging nodes, creating connections, and manipulating groups of nodes and edges.

Demo

Check out the live demo here:
Live Demo

Installation

To get started with the project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/RanitManik/ReactFlow-prototype.git
   cd ReactFlow-prototype

2. Install dependencies:

   This project uses npm or yarn for dependency management. Install the necessary dependencies by running:

   npm install

   or, if you prefer yarn:

   yarn install

3. Run the project:

   Start the local development server:

   npm start

   This will open the application in your browser at http://localhost:3000.

Contributing

We welcome contributions! To contribute to this project:

1. Fork this repository.
2. Create a new branch.
3. Make your changes and add tests (if necessary).
4. Open a pull request with a description of your changes.

Please ensure that your code follows the existing style and passes all linting and tests before submitting a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.