A Vue Flow implementation demonstrating dynamic node generation. Create and customize component structures at runtime without pre-registering node types.
Overview
The Facebook Messenger Flowchart application is an innovative tool designed to streamline the creation of flowcharts that represent the actions of Facebook Messenger bots. Built using Vue Flow and the Pinia store, it allows users to visualize and manage bot flows efficiently. With features that enable easy customization and manipulation of nodes, this app is a boon for developers and designers alike.
This tool is in its early stages of development but promises a robust set of functionalities that will enhance the user experience. Users can easily export and import their flowchart data as a simple text file, ensuring flexibility and adaptability in managing bot flows. Whether you are a beginner or a seasoned developer, this app aims to make your workflow smoother.
Features
- Drag-and-Drop Functionality: Easily drag nodes from the sidebar and drop them into the flowchart view for quick setup.
- Messenger Editor: Access this feature by double-clicking a Facebook Send Message Node to add or edit message components effortlessly.
- Resizable Components: Utilize containers, iframes, and images that can be resized for better layout management and design.
- Custom Nodes: Create personalized nodes such as Simple Text, Box with Title, and more to fit specific requirements in the flowchart.
- Dynamic Parent-child Relationships: Easily assign parent-child dynamics to nodes for organized flow, allowing drag-and-drop parenting.
- Custom Edges: Design unique edges using SVG graphics for improved flow control and visual appeal in the diagrams.
- Keyboard Shortcuts: Work efficiently with built-in keyboard shortcuts, such as using “BackSpace” to delete or “Shift” to toggle node selection.
- Quick Reply Components: Incorporate quick reply options in your flow to enhance user interaction within the Messenger bot.
