An interactive app built with React Flow to create dynamic, interactive diagrams with custom nodes & edges. This project showcases the power and flexibility of React Flow by allowing users to build, modify, and validate graph structures with ease.
- Live Demo: Reactflow Overview
Check out this video walkthrough to see the project in action:
reactflow-overview-demo.mp4
- Dynamic Node Management: Add and connect nodes on the fly.
- Delete Functionality: Remove unwanted nodes and edges seamlessly.
- Visual Pipelines: Create complex workflows or pipelines visually.
- Text Nodes with Auto-Handles: Add handles automatically for connections based on patterns like
{{name}}in text nodes. - Graph Validation: Validate if the current graph is a Directed Acyclic Graph (DAG) before submission.
- React: UI Library
- React Flow: For building diagrams and graph visualizations
- Tailwind CSS: For styling
Make sure you have the following installed:
- Node.js >= 14
- npm or yarn
- Clone the repository:
git clone https://github.com/f-z-coder/reactflow-overview.git cd reactflow-overview - Install dependencies:
npm install # or yarn install - Start the development server:
npm run start # or yarn start - Open http://localhost:3000 in your browser to view the app.
Feel free to fork the repository, make changes, and submit a pull request. Feedback and ideas are always welcome!
This project is licensed under the MIT License. See the LICENSE file for details.
Created by Faiz Shaikh
If you have any questions, feel free to reach out!
- React Flow Documentation
- Inspiration from the open-source community