Hi all as a complete beginner to node-red it has occurred to me that when trying to read a flow from left to right that if when you hover over a node a drop down would appear and show the action of that node also and very importantly if the node link wires were say blue to indicate flow to the next node or greyed out to show no flow say like at a bool switch or colour coding of the circles on the node connections . A more visual approach to reading the program flow if you know what i mean .What do you guys think could this be implemented ?
Hi @scadabob - welcome to the forum!
Could you give an example of the type of thing you had in mind here? Do you mean a tooltip to show the basic description of the node (ie what the info/help sidebar shows when a node is selected) or something more particular to how a node is configured etc?
For the wire colouring - do you mean to show activity on the wires?
Hi thankyou for the reply .
Yes for activity or "flow" ie program flow on the wires could we have the wire change colour from grey to say blue when we inject a value
so a beginner could see the flow to the next node and say depending on the logic of a switch node they can visually follow the output from the switch node to say a debug ect.
the idea being "visual" and " program flow"
What i mean for nodes and pop up menu is to be able to identify at a glance what this node is doing not just the type of node
Yes I understand this information can be found in properties menu but to be able in the editor to visually see the program you are trying to write would be invaluable to a beginner.
Take a very simple piece of logic written in c or phyton you see and understand the whole line of code For me as a total beginner looking at the editor feels disjointed when trying to read back the logic we have just written you have to click on stuff and go looking to get the overall view .
I realise what i am suggesting may not make total sense but I do feel the input of an unbiased beginner is valuable
Thanks again for your reply and your time .
After a message passes down a wire, how long should it stay blue?
What should happen if there is a message every second passing down it?
What should happen if there are 1000 messages every second passing down it?
I see where you are going .
Possible for a single message turn blue and stay blue and so on through the flow so when we inject we see the flow.
It could be flashing colour for multiple or updating flow.
It does not necessarily need to match real time just a visual representation of the logic or info flow
Another approach could be like a step through function button to visually step through the logic using colour on the wire and nodes.
This could be where the drop down of what each node is doing could appear as the node processes the logic.
So we see the logic visually execute .
1 Like
Have you tried the Node-RED debugger plugin?
As part of my introspection node collection, there is a message tracing feature that highlights nodes as they receive messages. Message can also be logged to the debug panel if necessary.
Fantastic information guys thankyou.
This is exactly what I was getting at .
The main point I want to get across is that for new users trying to grasp this visual style of logic
its very important to be able to see what a node purpose is .A function is not just a function as displayed on the node can you imagine a drop down that fires when the function fires and this dropdown describes the function this would be a fantastic tool for the beginner in the debug plugin .I do need to search for this message tracing feature .We are getting a little off track where I am pushing here is readability of the logic in front of you
Can you imagine reading through a small piece of c code where the function is just written as "Function here" but you have to look back at another window to see the actual function code this breaks your train of thought .I may be missing something but I am happy to share my thoughts if it can in any way improve node-red .Thank you again for the replies its very positive and encouraging .
2 Likes
You can (re)name the nodes.
Attach a debug node and the output in the debug will use this name, and you can click that name in the debug and it takes you to that node (also if you didnt rename them) and then it will blink the originating node.
Inside function nodes you can use node.warn('some message') and that will displayed in the debug output, with the same click behavior.
Are you aware of the recently introduced indicator when a node includes a description?
This button takes you to the description edit view:
You can include Markup and even mermaid diagrams.
Click on the Expand button (circled red above) and then the Preview button to display the description nicely formatted:
A node which has such a description gets an indicator in the editor (this is the new bit) :
.
Clicking the little badge takes you to the description input for the node.
While viewing the description takes more clicks than ideal, you can certainly use it to fully document your flow and individual nodes.
My example uses @gregorius' https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412 since he explains how to include a flow diagram.
Note that a flow tab has the same Description editor, but there is no badge shown on the tab to indicate that it is in use.
1 Like
My gripe with that is that icon also shows up for subflows with documentation. All my subflows have documentation, since it's the easiest, most important and efficient part to document. But I rarely document in nodes themselves, however when I do, that's often the most important. So it gives a lot of "false" flags from my point of view.
Just to go off-topic - I recently update the flow2uml package to include a node for creating UML diagrams - so now you can use Node-RED to create Mermaid diagrams. The advantage of the node is that I can give names to connections between entities.
Examples of using the node:
