Layout Utility

[bcakmakoglu]

I'm thinking of creating a built-in utility to provide a layout to the nodes, basically like the current example does using dagre.
Dagre is not being maintained afaik and I haven't found any viable alternatives, so if any of you know one, I'd be happy to hear about it.

The layouting would receive a collection of nodes that have no specific positions set (or we can just overweite their positions) and group them by levels which are then aligned either verically or horizontally.

I will update the post with an example when I got one ready but I don't expect this feature to be available before 0.4.1.

If you are interested in this feature let me know by reacting to the post or commenting ☺
0.4.0 has priority over any new features currently, for obvious reasons.

[bianpratama]

@bcakmakoglu

XState Vizualizer is using elkjs for their auto-layout algorithm.

• https://github.com/kieler/elkjs
• https://github.com/statelyai/xstate-viz/blob/4ce37950f942013c8e4ee16eeb67b24a9309862f/src/graphUtils.ts
• https://github.com/statelyai/xstate-viz/blob/44e2f3061244967bbc7f769ede4a419efcb5ad77/src/directedGraph.ts

[bcakmakoglu]

Thanks for the suggestion!
I will look into it; I was wondering what XState was using but didn't look into it 😅

[bianpratama]

Eventually, I'm going with d3-force + d3-hierarchy. So that, it aligns with how vue-flow uses d3 family: d3-drag, d3-selection, and d3-zoom. And it will be easier to extend to other layouting algorithm.

Below is preview of the implementation, using forced-directed tree:

[bcakmakoglu]

Yeah React Flow is using a similar concept for their forced layout examples, so it's not a bad idea to look into what's available with d3.

[bianpratama]

Yes, I initially got the idea from React Flow's example of Force Layout. But because it's behind a paywall, I tried to play with my own implementation using Vue Flow.

I will try to contribute a PR for Vue Flow's examples, when my implementation have been more stabilized.

[bcakmakoglu]

That would be great! I am looking forward to it 🚀

[JonasPardon]

Hey there!

I'm exploring Vue Flow as a replacement for mermaidjs for a package I'm developing that shows a flowchart of an event-driven application. I wanted to make it more interactive and landed on this package for now as it looks very sleek 👌🏻

The only issue so far is the fact that I currently let mermaidjs do the layout and calculating it myself is a bit complex.

My question is: do you think auto-layout would support something along the lines of the attached example, and if you think it's feasible, are you still planning a layout utility any time soon?

Either way, thanks for the package, I'm for sure keeping this one in the back of my mind for non-pet-projects as well!

[bcakmakoglu]

There are layouting algorithms that handle these cases, like dagre, elkjs, d3-hierarchy.
Have you tried checking those out and implementing them on top of your graph for layouting? :)
I'm still not sure if I will be adding a layout utility - so until something like that happens, you might want to arrange yourself differently.

[JonasPardon]

Thanks for the tip, I'll give it a shot!

[bcakmakoglu]

An example using dagre can be found here, you can use that as a starting point :)