The Chat Flow Diagram Builder is a web application that empowers users to create interactive chat flow diagrams effortlessly. Built using React, ReactFlow, and Tailwind CSS, this project offers a seamless user experience for designing and visualizing chat flows.
- Interactive Canvas: Users can seamlessly interact with a canvas area to drag and drop nodes, connect them, and organize the chat flow diagram according to their preferences.
- Diverse Node Types: The application supports various node types, including chat nodes, user input nodes, and response nodes, enabling users to construct comprehensive chat flows.
- Node Customization: Each node can be customized by editing its label or message content, allowing for personalized chat flow representation.
- Effortless Node Connections: Nodes can be effortlessly connected by dragging from one node's handle to another node's handle, providing an intuitive way to establish connections between different parts of the chat flow.
- Informative Sidebar: The sidebar provides users with the ability to add new nodes to the canvas and offers clear instructions on how to interact with the flow diagram, ensuring a smooth user experience.
- Robust Error Handling: The application includes robust error handling mechanisms to ensure the validity of the flow diagram. If all nodes are not properly connected, an error alert is displayed, preventing users from saving the flow until the issue is resolved.
To run the project locally, follow these simple steps:
- Clone the Repository:
git clone https://github.com/your-username/chat-flow-diagram-builder.git- Navigate to the Project Directory:
cd chat-flow-diagram-builder- Install Dependencies:
npm install- Start the Development Server:
npm run dev- Open the Application in Your Browser:
Navigate to http://localhost:3000
- React: A JavaScript library for building user interfaces.
- ReactFlow: A library for building node-based diagrams and flow charts.
- Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces.
- Lucide React: A lightweight icon library for React applications.