remcoplasmeyer / flowy-vue

Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.

Flowy Vue

🔥 Features

• Use Vue components to create a flowchart or hierarchy system
• Easily extendable logic
• Drag and drop events
• Use any component in your node tree, variable widths supported
• Based on Shopify Draggable Vue
• (Optional) Quasar app extension

📄 Instructions / documentation / examples

• Documentation

⚙️ Developments

npm run serve

Runs the app in the development mode. Open http://localhost:8080/flowy-vue to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

👏 Contributing

If you have any questions or requests or want to contribute to @hipsjs/flowy-vue or other packages, please write the issue or give me a Pull Request freely.

🐞 Bug Report

If you find a bug, please report to us opening a new Issue on GitHub.

📝 License

This project is MIT licensed.

flowy-vue's Issues

Vue3 support

I love this plugin and it's exactly what we need. I was just wondering if you guys will soon have support for vue3

drag item create new root / parent

is there is an example of dragging an item from the toolbar for creating a new root (parent -1)?
thanks

SVG horizontal connectors breaking on zooming out

Hi Remco, Kudos for writing this one. :)

I have been using this for my current work. I have also added a minimap with this and some zoom features. But as soon as I zoom out to less than 1, the horizontal lines start breaking.

Do you know a way to fix this?

How to use it ?

I removed the demo blocks on the page and tried to drag drop the components in dropzone but it didn't worked.
Can you please share a working example?
I am unable to add a parent node if I remove it once.

Is the underlying tree data structure exposed?

I have a need to identify whether or not the target node of a dragged node is currently a child of the dragged node (either directly or somewhere further down the line). Presumably there is already some data structure under the hood representing the tree, so it would be great if I could do a lookup to get straight to the target node and easily identify all the children. Is that data structure exposed at all or is there any function I can call that would help? Love the plugin, thanks a lot!

Zoom in / out and panning

Great library right here, i already intergrated it in my app.

I need a zoom/pan feature (maybe already implemented ?). I would like to have the author's take on how could I go about making it.

maybe trying to add a panzoom library like this one: https://github.com/anvaka/panzoom.
or submit a PR for this using js scale and transformation.

Unknown custom element

hi I've tried to use this package and I've created a component for the nodes but I get this error

" - did you register the component correctly? For recursive components, make sure to provide the "name" option."

could use some help tnx

Add arrows so that relationships can go in either direction (or both).

https://old.reddit.com/r/vuejs/comments/hnttmk/flowy_vue_makes_creating_flowchart_or_hierarchy/fxfajys/

How to go from 1 to 3 to 1 nodes?

Trying to create a flowchart that starts at 1 block, links out to 3 blocks, and then all 3 block flow to a 5th block.
Is this possible?

Horizontal relations

Hi!

Thank you for an amazing component! Is there any plans of supporting horizontal relations?

I'd be happy to assist if possible; either by code, donation, or both! 😄

Bugs event emit

You've got a bug , on this line https://github.com/remcoplasmeyer/flowy-vue/blob/master/src/components/FlowyNewBlock.vue#L52

label the connectors to explain relationships

https://old.reddit.com/r/vuejs/comments/hnttmk/flowy_vue_makes_creating_flowchart_or_hierarchy/fxfajys/

Breaks usages of Vue-draggable on our app

Hi.. really like the look of this but when installed on our app it breaks elements that have been built using vue-draggable.
I don't have errors but current draggable elements no longer work correctly. Is there a compatibility issue with the two packages?

Support multiple parents (parent Ids)

@remcoplasmeyer Very useful plugin! Just a question, is there any extension for supporting multiple parent Ids or is it planned for a future release? If not, do you have any suggestions/ tips on how to implement this modification?

return false inside "beforeAdd" function does not change indicator to red

Thanks for this great tool. I have issue which I want to change indicator color to red if dragged node does not match certain condition. For testing purpose I just return false inside "beforeAdd" function to see if indicator change to red but it does not change it is still blue.. Is there anything wrong here or I am missing something. As per comments inside the function , the function will change the indicator to red if you return false.

beforeAdd({ to, from }) {
      // called before moving node (during drag and after drag)
      // indicator will turn red when we return false
      // from is null when we're not dragging from the current node tree
     
      return false
}

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Scale, zoom, transforms, drag, svg lines

Hello everyone! Seems like lots here have lot of issues regarding zooming / scaling, after lots of work I made this awesome tool to work as expected, anyone interested welcome to my repo https://github.com/maxganiev/flowy-draggable-vue
Demo: https://schema-draggable.netlify.app/

Fully rebuilt with vite builder, removed lots of unnecessary dependencies.
Currently the scheme can be stored to localStorage, now working to connect backend.

Beautify the connection between nodes

In many node editor, the connections between nodes are mostly curves rather than straight lines
Visually, this can achieve better results. Can you consider using Bezier curves, etc. instead of the current straight line connection?

There are some examples:

• Github workflow preview:
  
• Bolt editor for Unity3D:
  
• Node editor for Blender:
  

DragStop never triggered

It seems like the "@drag-stop" event from is never triggered and instead a @drag-start (or better said multiple) are triggered when dropping a new block onto

I wanted to add a @drag-stop handler to be able to add first-level parent nodes whenever a node is dropped on the component instead of at the end of an existing node but the event is never triggered...

Alternative node template syntax

Component node templates are currently based on nodeComponent property in the dataset. This proposition is to incorporate one or both of the following suggestions:

1. Node template by slot (#default or #named). This can prevent some prop drilling.

<flowy :nodes="items">
  <template v-slot:default="{ node }">
    <flow-item v-bind="node" />
  </template>
</flowy>

2. Component as data property:

<flowy :nodes="items" :node-component='$options.FlowItem' />

Both suggestions are compatible with multiple block types in same collection if neccessary.

Multiple "parentId"s per node

How can I set a node to have multiple parentId values so that one node has multiple other nodes pointing to it?

If this is not implemented, I would suggest it as it is a common requirement for flowcharts. Thank you.

Swap position siblings nodes

Hi! This is awesome project!
I need one more function that swapping siblings node position.
Just I tried to play demo, I couldn't do this.
Any idea realize this?

NuxtJS Support

I was wondering if you can provide instruction how we could use this on Nuxt

Unknown custom element: <q-card>

app.js:65959 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

--->
at src/components/Draggable.vue

at resources/assets/js/components/CreateStoryV.vue

Swapping position siblings nodes

Hi! This is awesome project!
I need one more function that swapping siblings node position.
Just I tried to play demo, I couldn't do this.
Any idea realize this?

Emit custom events from node

It would be nice to be able to emit custom events from a node template

Property appendTo : 'body' might not be working

Hey, I believe the property appendTo : 'body' is not being passed properly to draggable. This causes a weird positioning issue for the draggable-mirror if the container is being scaled. The draggable-mirror is still attached to the container rather than the body

Flow through answers to questions.

Hi @remcoplasmeyer,

First of all, congratulations on the project, it is brutal 💯 🔥

Now the reason why I write, at the moment I am inserted in a project in which I have to do flow of this kind, however there are some variants that I still haven't been able to understand if it is possible or not to do it with Flowy.

Basically, the objective is to create a script, with multi-selection questions, in which each possible answer takes a path.

Dummy example:

What brought you to our website today?
1. I'm looking to buy
2. I'm just browsing
...

And the objective is that each answer has a certain flow.

I have here a print of an example that is intended.

Do you think it is possible to achieve this with Flowy or if not, its implementation will be very difficult?

Vuetify support?

I've tried to get vuetify to work in the same way that quasar seems to, but continually get Unknown custom element errors and no rendering. Is there any recommended approach for using other UI frameworks?

Can't catch the target/destination node in beforeAdd

beforeAdd({ to, from }) {
      // from is null when we're not dragging from the current node tree
      console.log('beforeAdd', to, from);
 }

Here, from returns undefined and to returns the node object that's currently being dragged. But in the method, there's no way to get the information of the destination node to which the currently dragged node is going to be attached. Kindly help in understanding if there's a way to achieve the same.