Node-RED auto layouting using elkjs & dagre

Hi There!

Following up on a long discussion and a previous discussion and also the pull request, I've come up with a flow that demonstrates various approaches to auto layout. To use the flow, you must install the introspection package which includes the ClientCode node.

I would have included the flow here directly but it's too large for discourse (see screenshot)

The flow is hosted at flowhub and if you install the flowhub nodes, you can pull the flow directly into Node-RED, flowid being: 291e3f0b7f652839

These layout engines (elkjs and dagre) can be used with any flow you happen to wish to layout, you can play with the layout algorithms and even use other engines. The whole thing works within Node-RED client, i.e. browser.


Thanks to @BartButenaers, the visuals:


Hi @gregorius,

Unfortunately I don't get it running. I think I have replaced all the escaped html characters by their original symbols, but there are quite a lot (in conditions, lambda expressions, ...). So most probably I fixed one of these incorrectly...

A couple of questions about your demo with the 2 layout engines (elkjs and dagre). Not sure if I ask them too soon, because you had not much time yet to experiment with this...

  1. Are these the 2 best layout engines for Node-RED (for some reason), or is there perhaps another reason why you choose those two (e.g. because they are the most easy to embed)?

  2. Are you going to explore other engines, or are these good enough?

  3. Is there already one of the two that you like most for some reason?

  4. Do you think one of those engines is good enough to be used in real life?

  5. So these engines offer lots and lots of options. I assume most of these can have default values that will do for all/most users, and that only some of them are useful to be customizable by users. Do you already have a subset in your mind, that might be useful?

  6. Are you already aware of some severe limitations, that makes it hard to build a general usable solution?

  7. Do you have plans to integrate this (e.g. using a plugin) into the editor in the near future, or are you just having an immense amount of fun with your lovely experiments? :yum:

Thanks for sharing your knowledge and endless creativity with us!!


1 Like

Ay, that there be many questions! As proviso I have to say that is this is very much an experiment, it's a side track of other things I'm doing, so no, I'm not going to push this to become part of Node-RED - that's for others to decide. I'm happy to help where I can, if others want to run with these ideas, all the better!

The only reason was that a) dagre there was example code from @lizzardguki and b) elkjs was the simplest to implement from the list from @TotallyInformation (it wasn't react related and seems to be stable and in usage). My main intention is for others to say "hey, I've got experience with engine XYZ and here's a flow that shows me how to integrate it and test it in Node-RED - let me try!". I built the flow to be extendable: extracting the including of a javascript lib, extracting the moving of the nodes (provided the right array of nodes is passed over) and I extracted the selection of the nodes which should be laid out.

All that was together in one client code node in the original flow :wink:

Probably not since dagre does a pretty good job - for my tastes but I'm not doing this for laying out regular flows, rather flows that I generate on the fly from other sources. Also elkjs has some 198 options for 12 different layout algorithms! There is plenty of room to experiment - IMHO :slight_smile:

I'm simply not a layout engine expert (depth and rank where new to me!) so objectively, learning the meaning of 198 options for something that is very much personal test (everyone has their own opinion on what is a good layout) is a little off the radar for me. Hence if someone has the knowledge, then that would be great.

What I'm trying to do is make experimenting with auto layout simpler since there is no checking out of branches nor hacking around in the browser console, it's just hacking around in a flow in Node-RED and pressing deploy.

dagre since it simply did a good layout from the start - admittedly from taken from the example code. Although if elkjs mrtree layout algorithm would go right, then it might will also be a good candidate.

How long is a piece of string? What is real life and what is good enough? I do think that elkjs must be able to do the job, after all it's from Eclipse layout engine ... if they're using it ... but it's a matter of experimenting with the various options. There are a bunch of examples and configuration possibilities ... it's a rabbit hole!

Not gotten that far but you're right, a subset or options for configuration would be great. On the other hand, why not have flows that have different lay-outing possibilities? Have a competition using the flow I've built and everyone can configure their own examples. One could define a set of ten different flows and the person who comes up with the best configuration options for a layout engine (any layout engine), gets a free subscription to the Node-RED monthly magazine! Of course, before that, one would have to have a Node-RED monthly magazine :slight_smile:

I've been playing around with very simple flows and nothing bad has yet happened :slight_smile: Whether this is a general usable solution depends on whether another JS library should be bundled into Node-RED or whether an inbuilt solution would be better - after all these libraries aren't tiny - dagre 100k v. elkjs 1.5MB - space v. time!

I'm pursuing other things but will help if others are interested in moving this along. I have my solution and am happy to work with an extra node - i.e. I don't need to have it integrated into Node-RED. IMHO it's definitely a feature that should be in Node-RED but whether that happens ... there are others here that have more to say about that.

I'm just a dude that has too many ideas :crazy_face:


@gregorius has created a flow to experiment with the different layout algorithms. Hopefully some folks here can find some time to play with it on different kinds of flows (straight lines, loops, ...) and share here their experiences. If one of the algorithms can solve most common flow layouts, it might be a good idea to integrate that one in our flow editor (via a plugin or whatever...).

1 Like

Also see this branch - WIP: Add an auto-layout action by knolleary · Pull Request #2267 · node-red/node-red · GitHub

Hi Dave,
One of the algorithms that @gregorius demonstrates already in his example flow, is the algorithm from that pull request. That way people can compare all the algorithms currently available, and discuss here which they like most and why...

In fact the animated gif above is the the algorithm from #2267 - since the entire code is frontend, I put it in a ClientCode node to be executed when triggered (btw the gif is from an earlier version of the flow).

I created this because I wanted to do some auto layout'ing for something else I was working on and the PR was not on my radar - else I might not have tried out dagre and elkjs, who knows.

As I said, this is an FYI not a request to have auto layout in Node-RED itself. At the moment, I prefer the mediative work of aligning nodes by hand and won't want the computer to have that pleasure! :slight_smile: