I’m working on a laptop without an external monitor and fast running out of horizontal space. Wrapping around to a new ‘line’ detracts from the beautiful layout. It would be great to be able to alternatively link two nodes together vertically. I’m imagining either: magic happens - when I drag one node below a linked one and the handles ‘move’ to maintain the shortage linkage (sounds problematic); or extra handles top and bottom for manual selection (sounds cluttered); or some toggle in the node settings to move the existing handles (input=left/top; output=right/bottom).
Hi,
thanks for the suggestion. This has been discussed a number of times over the history of the project; we don’t have any plans to change the basic left/right structure of the node. We want to maintain a visual consistency and in many cases, have wires running in multiple directions doesn’t help simplify things.
We did add the Link node to help with some of the challenges in laying out complex flows (challenges that wouldn’t go away if we did vertical flow as well…) as that can be used to more gracefully return a flow to the left-hand edge.
Fair call. You can see I was grappling with what a neat solution would look like too. At least others with the same request should now find this to see your thinking.
When I have a flow with a lot of sequential nodes I often use a vertical layout and just accept that the wires cut across from output on one node to the input on the next node down. Not ideal but better than nothing (for me anyway). Obviously you can get a lot more nodes down the page than you can across.
With minimal change to the HTML/SVG code I was able to achieve this kind of result ... If it's of any interest to anybody, I could pull a PR ...
That looks like quite a good change 
I’m open to proposals for tweaking the wire routing - but I’m also quite picky as @dceejay will confirm. Not sure these proposals feel like the wires flow naturally.
1 Like
I understand. I’ll try to find some time tomorrow to pull a PR and I’ll let you decide. IMHO I think it looks “natural” enough, it’s not perfect and it’s just a small tweak but at least it avoids wires running through nodes when nodes are just below each other …
The wires passing through the gap is quite nice - but the almost random angles of the input and exit wires is a bit too extreme imho e.g the more stuff to some more stuff.
1 Like
Ok, the PR is here ...
Personally I don’t like it unless the wires enter the node at right angles.
Hi folks,
Don't hit me with a huge hammer if this is discussed already a million times before. I really understand that we need visual consistency in the flows. But in some conditions (e.g. when you need to wire from the right to the left for looping), the current wirings are not very clear to me ...
See a lot of good proposals in this discussion, but everybody has it's own visualisation preferences. Which is a good thing, otherwise we would be living in a very monotonous world after all ...
Wouldn't it be better if each wire separately could have it's own shape? Then the default would be the current shape, but at least we could deviate from the default. But perhaps not easy to implement if wires don't have custom properties yet?
Most diagram tools offer multiple wiring shapes, like e.g. this one:
Shapes like the universal connector could be hard to implement, since you need handles and so on. But a pallette of other (non-editable) shapes would be a nice addition. Or e.g. add an 'optional' arrow shape somewhere (e.g. in the middle of the connector) to show which direction the messages are flowing...
And I have the impression that our Francois (@tilleul) has enough (graphical) programming skills to assist us further in this one 
Thanks for discussing about this!
Bart
Thanks for the compliment Bart but I’m not a graphical programming expert. In fact, to achieve the above result, I tweaked the SVG Bezier curves parameters in Developer mode in Chrome and then translated it to JS code at the appropriate place in NR code.
Regarding my proposition of wires passing in-between close (almost stacked) nodes: I agree that the angle is not as horizontal as it should be if we want to have a “sweet/smooth” flow impression. It does not bother me but I can accept it as a reason for having my suggestion rejected.
In order to achieve more horizontal wires, I think we would have to add another Bezier curve after the output node and one before the input node … there are techniques to chain multiple beziers curves in a “smooth” way (poly-Bezier curves) but it requires more computation than what I’ve proposed (which is pretty basic if you check the code in the PR).
I just want to be sure that it’s the only reason why it was rejected. I may be wrong but I also have the feeling that in fact, the community is not very fond of (or used to) nodes “stacked” that way. I see no difficulty in “reading” the flows I’ve attached above. In fact, I think it’s much more readable than if it had the actual wiring system (because the wires would be partially going “under” the nodes). But maybe some of us are just not used to have nodes “stacked” ? Is this some kind of NR guideline ? Personally, I’m stacking nodes very often: I’m working most of the time on my laptop, I don’t have a huge screen, I don’t like using the scrollbars and I can’t zoom out too far if I want to still be able to read the text within the nodes. So “stacking” nodes allow me to better exploit the workspace.
There are many ways to resolve the problem with wires passing under nodes. I’m ready to help with at least the “basic” way of wiring (for example: try poly-curves and take into account multiple outputs-nodes) but I’d like to know first what do you expect from a “smooth flow” ?
2 Likes
I forgot to mention that the code in the PR doesn't do that anymore, which is really extreme and not horizontal AT ALL
I think having a default but with ability to change the style might be the way forward as the main devs do seem to like the current editor appearance quite a lot (as is their prerogative of course ) and are reluctant to changing it
I’d prefer if the wires didn’t go behind nodes when dropping down to next level and would really like them to fit between nodes along the lines of your pull request so it be nice if the wires could be amenable to right-clicks 
As Bart correctly surmised - wires don’t yet have properties - so it would be a fundamental change to the guts of Node-RED to add that. And while technically possible is not on our roadmap until at least after 1.0. As Nick said we are not 100% against changing the shape of the wires - but we do like the smooth curve more than we like stacking blocks (as we tend to read flows left to right then link back to start - a bit like this sentence - so the new curve just needs to be the right new curve.
Fully agree.
It does take time to get used to the layout of Node-RED when you are used to things like Visio and other diagram tools but it does make for a more consistent and simple layout once you get the hang of it.
I spent some time when the link node appeared to greatly simplify many of my flows. It works really well.
I’d certainly be up for some additional wiring options too but I’d rather see v1 first 
Okay, so this thread has got me distracted from other tasks. Have poked around a bit on this and have got the following working. It only changes the link when the destination node is 'behind' the source node - otherwise the link shape is as before.
Here's a comparison of current-vs-new:
And a static shot of the new if the flickering of the animated gif is too distracting...
Under the covers, when the new logic kicks in, it treats the link as 4 bezier curves rather than just one - allowing for more control.
Thoughts? (Keeping in mind, the scope here is to tweak the automatically generated path of the link - not to invent whole new ways for the user to manually route the link).
3 Likes
For reasons that are not clear to me I actually prefer the current algorithm even if they cut under the nodes. I think there is something less natural about the higher order curves. Possibly because the single bezier is closer to a sine wave it is more aesthetically appealing. I am not going to get excited about it either way though.
