Facebook Messenger flowchart builder using vueflow

Facebook Messenger Flowchart

This app is an example of how to use vue-flow with Pinia store, to create a flow with custom components, its main purpose is to create flowchart that helps to describe Facebook Messenger bot action. The flowchart and all of its data can be exported and imported to simple text file. The project is just at it’s begining but many functionnality will be implemented.

How It Works

  • Nodes can be dragged from the sidebar and dropped into the view.
  • Adding Messenger Items can be done using the messenger editor.
  • All functionnality of vue-flow can be used on it.

Screenshoot

Project Setup

The project is a Vuejs app created using Vite.

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

? Special Thanks

This project is built with

  • vue-flow
    • Vue flow made possible building this tool by simplifing everything.

GitHub

View Github