How difficult would it be to add some basic drawing tools to the editor?
Things like box, circle, text. Perhaps even some colour?
Grouping stuff within a tab would be so much easier using visual queues.
1 Like
There is already one option for organizing nodes.
Groups, well you can always leave big enough gaps between logical groups.
The simple answer is - quite difficult. So not on any near term to-do list.
Everything about a flow is held in the flow file - and that doesn't have the concepts for things that aren't nodes - or things not part of the flow itself. To revisit that would be a fundamental reworking of the guts of Node-RED that we don't really have time for compared to all the other things we also have on the roadmap.
1 Like
Thanks for reply.
Well, this seems a good time to let (another) cat outta the bag... so here goes nothin'!
Earlier this year, I developed a new feature for the node-red Editor -- Swimlanes -- in order to visually separate portions of flows by task, owner, context, whatever. Here is an example of how it looks in one of my projects:
The swimlane information is stored as 2 new properties on the flow (tab) itself, so there are no extra nodes needed. The tab Edit panel is enhanced to allow adding, editing, and moving the swimlanes -- like so:
In addition, the "headers" for each swimlane (the semi-opaque rect on the left) can be dragged and resized right in the node-red Editor. The implementation is similar to the grid lines, in that they are background display only and can be turned on/off as necessary.
I do have several other improvements planned, so the nodes can move with the lanes. My employer has given me permission to contribute this work back to the community, if Nick and the team think it would be useful to the general public. Anyway, just wanted to get a conversation started, fwiw...
__
Steve
17 Likes
Ha! Simple but potentially useful. Nice.
While there is no doubt that some kind of more generic "container" format for grouping sections of flow would be really nice (if you've ever used Microsoft Visio, you'll know how that works), horizontal swimlanes could be really useful in some circumstances for sure.
Be nice if the lanes automatically adjusted to their contents 
but I realise that would be back to the "quite difficult" understatement that Dave made.
Also be nice if the colours could be #rrggbb CSS types too.
Great work though, I hope this gets adopted.
Certainly a vast improvement over having nothing. 
I started down that path, but found that most combinations made the whole flow hard to see. Without pre-defining some options, I was spending too much time tweaking the color palette, and it was too difficult to have consistency across my flows.
And since my requirements were to have a curated list of colors, I settled on these -- enough separation from each other (imo), without obscuring the wires/nodes (with and without highlights) of the flow editor.
Interesting idea ... I suppose that to achieve this you had to modify the core of NR ?
All valid points Steve and I'm certainly not complaining about having some pre-defined colours - I wouldn't complain anyway! 
However, not everyone uses the standard colour scheme so at some future point, people will doubtless be needing the capability. Still a great start though and I certainly back having this PR'd into core if possible.
Yes -- it's rather tightly integrated into d3 logic for drawing the grid lines. This was necessary since svg elements don't use z-index to determine which are "on top of" each other -- that is defined by the order the elements occur on the page (*aargh)
That is part of svg v2 standard it seems. No idea when/if browser support will ever arrive for that. It seems permanently stuck in "Editors Review" at the W3C.
I am quite surprised of how little appraisal this has received. This feature would be immensely useful. Also the execution looks extremely polished. Awesome work!
I've been wanting to document my flows to assist seeing the logical grouping of nodes. The he existing comment node seems to just clutter up the flow even more so I've stopped using it. It does not visually stand up enough for it to be useful. .
Agreed, very useful, but other priorities I guess. 
There is certainly a bit of art involved with laying out a neat flow. I couldn't live without plenty of comment nodes though.
1 Like
Some food for thought;
It would be great if it was possible to resize the comment node as a "border" around a flow (perhaps with custom background color and hidden icon as it doesn't add much value to the node)
This comes up on a fairly regular basis. However, I think that most of us would prefer a "group" node so that the nodes it contains move about together.
To be honest though, even one that didn't interact with the nodes but, as you say, had a resizable border would be useful.
Not sure whether it is worth overloading the comment node for that though. Might be better for it to be a separate node - after all, all nodes now inherit a comment tab.
The Node-RED Trello board is a useful place to see what might already be on the roadmap for future releases:
Also, don't forget that you can use a subflow to group nodes together as well. Although they are designed for reusability, you don't have to reuse it.
2 Likes
also discussed:
and
3 Likes
I assume that to contribute something of this nature, one would have to know something about D3? I can't imagine it would be that easy to do.
Yes, but some of us (ok, maybe only me) wanted the ability to be able to "draw" on/in the Editor as well. Nothing fancy, but enough to add text, some flowchart symbols, and basic line drawing tools. Throw in some colour as well, and ...
1 Like
