React Flow Pannel is a web application built with React and React Flow library for visualizing and editing flow diagrams. Product is live on Frontend Assignment Kunal
- Add and edit nodes in the flow diagram
- Connect nodes to create edges
- Save and load the flow diagram
- Pop-up messages for feedback
-
Clone the repository:
git clone <repository-url>
-
Navigate to the project directory:
cd react-flow-pannel
-
Install dependencies:
npm install
-
Start the development server:
npm start
-
Open your browser and go to
http://localhost:3000
to view the application.
- Click on the "Message" button in the sidebar to add a new node to the flow diagram.
- Double click on a node to edit its label.
- Connect nodes by dragging from one node's handle to another node's handle.
- Click on the "Save Changes" button in the header to save the flow diagram. A pop-up message will appear indicating whether the save was successful or not.
- You can customize the appearance of nodes and edges by modifying the
CustomNode
andCustomEdge
components in thesrc/components
directory.
- React
- React Flow
- PopUp
Contributions are welcome! If you find any bugs or have suggestions for improvement, please open an issue or submit a pull request.