Home
Softono
a

azim-ahmed

Professional software vendor delivering innovative solutions on the Softono platform. Specialized in both open-source and proprietary software development.

Total Products
3

Software by azim-ahmed

Automation-workflow
Open Source

Automation-workflow

# 🚀 React Flow Examples • Workflow Automation • Visual Flow Builder *A curated collection of advanced, real-world **ReactFlow examples** used for automation workflows, chatbot builders, drag‑and‑drop editors, visual node systems, and AI‑powered pipelines.* > This repo provides **production-grade React Flow implementations**, advanced layouts (ELK.js, Dagre), automation builders, JSON‑based node rendering, conditional routing, and enterprise‑level UI patterns. ------- # 🌟 Why This Repository Matters Perfect for developers building: - ⚡ **Automation Workflow Builders** - 🤖 **Chatbot Flow Builders (Voiceflow / Landbot style)** - 🧩 **Node‑Based Visual Editors** - 📈 **Data Analytics Flow Diagrams** - 🔧 **Drag‑and‑Drop Workflow Systems** - 🔄 **JSON → Visual Flow Converters** - 🌐 **No‑Code/Low‑Code Automation Platforms** - 🧠 **AI Agent Flow Builders** - 🎛️ **Dynamic Handle & Multi‑Edge Systems** - 🧭 **ELK.js / Dagre Algorithm Layouts** --- # 🔍 Live Examples & Demos (With Image Previews) ## 🟦 All React Flow Examples 🔗 https://visualflow.dev/ --- ## 🟩 New Drag & Drop Workflow Builder (Paid) 🔗 https://check-automate.vercel.app/ ![Drag & Drop Workflow Builder](https://github.com/user-attachments/assets/3f353e08-4509-4690-80c0-b103f3f8c7a2) --- ## 🟧 Automation Flow (Updated Design) 🔗 https://automationflow.vercel.app/ ![Automation Flow Updated](https://github.com/user-attachments/assets/c7a3bbe0-ba58-4032-bd98-2e2fcf2141e5) --- ## 🟪 Group Layout with Multiple Nodes 🔗 https://group-layout-flow.netlify.app/ ![Group Layout Flow](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/5c9acc61-9027-4c3c-9457-6230677d8598) --- ## 🟫 Auto Layout Workflow (ELK.js + Dagre) 🔗 https://auto-layout-workflow.vercel.app/ ![Auto Layout Workflow](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/90939760-ebf0-4a62-be2f-fa9f8be12f6d) --- ## 🟧 SquareBear App Workflow 🔗 https://app.squarebear.com.au/ ![Squarebear](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/032ca98d-2c5f-419e-9263-7b6567d0756e) --- ## 🟦 Dalus Flow ![Dalus Flow](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/0798387c-1506-4688-a47b-188de913c8f2) --- ## 🎨 Design-Only Flow ![Design Only Flow](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/e7ef290c-3f06-4e10-b663-f5bf9ca7b09b) --- ## 🟩 BoneGuide Editable Workflow 🔗 https://boneguide.netlify.app/workflow ![Editable Workflow](https://user-images.githubusercontent.com/67516192/229745209-f4679186-5cec-401c-9b8d-1e5066a3aeb0.png) --- ## 📊 Data Analytics Flow Diagram 🔗 https://flow-diagram-automate.vercel.app/ ![Analytics Flow](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/c41b5416-6a77-4f88-be5e-f92e713eb1ea) --- ## 🟦 Workflow Automation UI 🔗 https://workflowautomation.netlify.app/ ![Automation UI](https://user-images.githubusercontent.com/67516192/218781461-0aac3060-ee8d-442b-a2ff-31bb1b9031a4.png) --- ## 🟣 Prosp (Cold Outreach Automation Flow) 🔗 https://prosp.ai/ ![Prosp Flow](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/f70e29da-3215-4164-9a6f-01dfe72276ac) --- ## 🟡 GraphFlow (JSON → Flow Visualizer) 🔗 https://graphflow-amber.vercel.app/ ![GraphFlow](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/ff772940-1df9-4a09-8b7a-276c0dbff2ca) --- ## 🎤 VoiceFlow Clone (Chatbot Builder) 🔗 https://voiceflow-two.vercel.app/ ![Voiceflow Clone](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/6321949d-f9ab-457d-8d05-323b1c91f789) --- ## 🎛️ Dynamic Handles (Advanced Node System) ![Dynamic Handles](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/c113f343-88d1-4c0a-ba6c-904b69767204) --- # 🧠 SEO Keyword Boost *(Optimized to help this repo rank on Google + GitHub Search)* ``` react flow examples, reactflow automation, reactflow builder, workflow automation ui, drag and drop react workflow builder, visual flow builder, node based editor react, chatbot builder reactflow, elkjs reactflow examples, dagre react flow, automation pipeline ui, ai automation builder react, json to react flow renderer, react flow open source examples, no code workflow builder react, reactflow custom nodes, reactflow dynamic handles, reactflow layouts ``` --- # 🤝 Collaboration & Custom ReactFlow Projects Need **custom automation workflows**, UI engines, AI agents, or enterprise-grade ReactFlow tools? ✔️ Custom node logic ✔️ Conditional routing ✔️ UI/UX automation builders ✔️ Flow editors for SaaS products ✔️ Chatbot & AI agent flows ✔️ Real‑time drag & drop apps ✔️ JSON-driven flow renderers 📩 Email: `[email protected]` 💬 Discord: https://discord.com/invite/zh72eGKk3N 🌐 Portfolio: https://visualflow.dev --- # ☕ Support My Work <a href="https://www.buymeacoffee.com/azimahmed" target="_blank"> <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="60"> </a> --- # ⭐ Want More Examples? Just open an issue with your requirements. I can build **custom, premium, or open-source ReactFlow solutions** tailored to your project. react flow developer, reactflow expert, reactflow automation builder, workflow builder react, visual scripting in react, react node editor examples, automation flow ui design, best reactflow examples 2025, open source workflow builder, dynamic node editor react, elkjs workflow layout, reactflow designer templates, chatbot flow engine react, drag and drop ui builder react, json workflow renderer reactflow, low-code flow editor react, reactflow ui components, reactflow advanced examples, reactflow portfolio, node ui graph builder, react graph visualization examples, react flowchart builder, react pipeline builder, reactflow multi-node routing, reactflow conditional logic ui, workflow editor react project, reactflow customization tutorial, reactflow custom edge examples, reactflow drag handle system, automation dashboard react, visual graph editor react, reactflow paid components, new reactflow examples 2025, react automation ui, automation diagram in reactflow

Workflow Automation Low-Code & No-Code Dev
311 Github Stars
chat-flow-builder
Open Source

chat-flow-builder

# BiteSpeed Frontend Task: Chatbot flow builders ## This is created by Denish , and his repo is https://github.com/denishsharma/chatbot-flow-builder-task-bitespeed ## I have cloned this and make this more available to my github due to more reach ## Scroll Below to see custom nodes and logics and issues and others <img width="1510" alt="image" src="https://github.com/user-attachments/assets/275aa9c0-46fc-4c48-bc95-a365974e94e8"> worked-at [See the live demo](https://chat-flow-builder-one.vercel.app/) We’ll build a simple Chatbot flow builder using React and try to make the code extensible to easily add new features. A chatbot flow is built by connecting multiple messages to decide the order of executions ## Features ### Nodes - **Start Node**: The starting point of the flow. - **Message Node**: A message to be displayed to the user. - **Conditional Path Node**: A condition to be matched with multiple cases or paths to be taken. (showcase to use of dynamic handles) - **End Node**: The end of the flow. ### Sidebars - **Node Sidebar**: Contains the list of nodes that can be added to the flow. - **Node Properties Sidebar**: Contains the properties of the selected node. ### Flow - **Validation**: Check if the flow is valid or not. A valid flow should have a start node and an end node. - **Auto Adjust**: Nodes will automatically adjust their position to avoid overlapping. It won't adjust the flow lines. ## Tech Stack & Libraries - React - React Flow - Zustand - TypeScript - UnoCss ### Clone this repo and use `yarn` to run the application ### this is based on v-10, 11 -> Want to collaboration for your project? <a href="https://www.buymeacoffee.com/azimahmed" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a> let me know then your project mind: : with pro-features ## [email protected] ### chatbot builder--> contact me through email to see ### ask for better examples # 🚀 React Flow Examples • Workflow Automation • Visual Flow Builder *A curated collection of advanced, real-world **ReactFlow examples** used for automation workflows, chatbot builders, drag‑and‑drop editors, visual node systems, and AI‑powered pipelines.* > This repo provides **production-grade React Flow implementations**, advanced layouts (ELK.js, Dagre), automation builders, JSON‑based node rendering, conditional routing, and enterprise‑level UI patterns. --- # 🌟 Why This Repository Matters Perfect for developers building: - ⚡ **Automation Workflow Builders** - 🤖 **Chatbot Flow Builders (Voiceflow / Landbot style)** - 🧩 **Node‑Based Visual Editors** - 📈 **Data Analytics Flow Diagrams** - 🔧 **Drag‑and‑Drop Workflow Systems** - 🔄 **JSON → Visual Flow Converters** - 🌐 **No‑Code/Low‑Code Automation Platforms** - 🧠 **AI Agent Flow Builders** - 🎛️ **Dynamic Handle & Multi‑Edge Systems** - 🧭 **ELK.js / Dagre Algorithm Layouts** --- # 🔍 Live Examples & Demos (With Image Previews) ## 🟦 All React Flow Examples 🔗 https://reactflowexample.vercel.app --- ## 🟩 New Drag & Drop Workflow Builder (Paid) 🔗 https://check-automate.vercel.app/ ![Drag & Drop Workflow Builder](https://github.com/user-attachments/assets/3f353e08-4509-4690-80c0-b103f3f8c7a2) --- ## 🟧 Automation Flow (Updated Design) 🔗 https://automationflow.vercel.app/ ![Automation Flow Updated](https://github.com/user-attachments/assets/c7a3bbe0-ba58-4032-bd98-2e2fcf2141e5) --- ## 🟪 Group Layout with Multiple Nodes 🔗 https://group-layout-flow.netlify.app/ ![Group Layout Flow](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/5c9acc61-9027-4c3c-9457-6230677d8598) --- ## 🟫 Auto Layout Workflow (ELK.js + Dagre) 🔗 https://auto-layout-workflow.vercel.app/ ![Auto Layout Workflow](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/90939760-ebf0-4a62-be2f-fa9f8be12f6d) --- ## 🟧 SquareBear App Workflow 🔗 https://app.squarebear.com.au/ ![Squarebear](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/032ca98d-2c5f-419e-9263-7b6567d0756e) --- ## 🟦 Dalus Flow ![Dalus Flow](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/0798387c-1506-4688-a47b-188de913c8f2) --- ## 🎨 Design-Only Flow ![Design Only Flow](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/e7ef290c-3f06-4e10-b663-f5bf9ca7b09b) --- ## 🟩 BoneGuide Editable Workflow 🔗 https://boneguide.netlify.app/workflow ![Editable Workflow](https://user-images.githubusercontent.com/67516192/229745209-f4679186-5cec-401c-9b8d-1e5066a3aeb0.png) --- ## 📊 Data Analytics Flow Diagram 🔗 https://flow-diagram-automate.vercel.app/ ![Analytics Flow](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/c41b5416-6a77-4f88-be5e-f92e713eb1ea) --- ## 🟦 Workflow Automation UI 🔗 https://workflowautomation.netlify.app/ ![Automation UI](https://user-images.githubusercontent.com/67516192/218781461-0aac3060-ee8d-442b-a2ff-31bb1b9031a4.png) --- ## 🟣 Prosp (Cold Outreach Automation Flow) 🔗 https://prosp.ai/ ![Prosp Flow](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/f70e29da-3215-4164-9a6f-01dfe72276ac) --- ## 🟡 GraphFlow (JSON → Flow Visualizer) 🔗 https://graphflow-amber.vercel.app/ ![GraphFlow](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/ff772940-1df9-4a09-8b7a-276c0dbff2ca) --- ## 🎤 VoiceFlow Clone (Chatbot Builder) 🔗 https://voiceflow-two.vercel.app/ ![Voiceflow Clone](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/6321949d-f9ab-457d-8d05-323b1c91f789) --- ## 🎛️ Dynamic Handles (Advanced Node System) ![Dynamic Handles](https://github.com/Azim-Ahmed/Automation-workflow/assets/67516192/c113f343-88d1-4c0a-ba6c-904b69767204) --- # 🧠 SEO Keyword Boost *(Optimized to help this repo rank on Google + GitHub Search)* ``` react flow examples, reactflow automation, reactflow builder, workflow automation ui, drag and drop react workflow builder, visual flow builder, node based editor react, chatbot builder reactflow, elkjs reactflow examples, dagre react flow, automation pipeline ui, ai automation builder react, json to react flow renderer, react flow open source examples, no code workflow builder react, reactflow custom nodes, reactflow dynamic handles, reactflow layouts ``` --- # 🤝 Collaboration & Custom ReactFlow Projects Need **custom automation workflows**, UI engines, AI agents, or enterprise-grade ReactFlow tools? ✔️ Custom node logic ✔️ Conditional routing ✔️ UI/UX automation builders ✔️ Flow editors for SaaS products ✔️ Chatbot & AI agent flows ✔️ Real‑time drag & drop apps ✔️ JSON-driven flow renderers 📩 Email: `[email protected]` 💬 Discord: https://discord.com/invite/zh72eGKk3N 🌐 Portfolio: https://reactflowexample.vercel.app --- # ☕ Support My Work <a href="https://www.buymeacoffee.com/azimahmed" target="_blank"> <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="60"> </a> --- # ⭐ Want More Examples? Just open an issue with your requirements. I can build **custom, premium, or open-source ReactFlow solutions** tailored to your project.

Workflow Automation Live Chat & Chatbots Customer Engagement
58 Github Stars
Node-flow-diagram
Open Source

Node-flow-diagram

Node-flow-diagram is a powerful software component designed to create interactive, node-based diagrams directly within web applications. Built on top of Reactflow, a leading library for browsing and editing graphs, this tool leverages the React ecosystem to provide a highly customizable interface for visualizing complex data relationships. It enables developers to construct flowcharts, workflow editors, and system architecture diagrams with ease. Key features include drag-and-drop functionality for placing nodes, intuitive connection handling for linking elements, and a responsive canvas that supports zooming and panning. Users can define custom node types to represent specific data formats, facilitate real-time collaboration, and integrate with various backend systems for data persistence. The software is ideal for use cases such as building business process modeling tools, designing visual programming environments, mapping event-driven architectures, and creating educational platforms that require dynamic d

Diagramming & Flowcharts Team Whiteboard
55 Github Stars