I've been playing around with Mermaid diagrams for a while and now that in version 3.1.x they are officially supported, I've created a convertor flow that takes your node-red flow and generates a Mermaid flow diagram.
It does this with a non-deployed flow, i.e. what see in the editor, is what you get. I've put in a few different shapes so that some node types can be differentiated and also if possible, a dashed line between link-out and link-in nodes.
I'm sure its buggy and broken but it does its best - BBB-software so to say!
Again a flow that could be nominated for the Node-RED creativity award 2023.
But I am wondering where in real life something like this can be used?
I assume there are good use cases, but my brain is to small to find one
Thanks for illuminating me!
I find this idea amazing. Downside (because of node-red itself) is the output in payload, it can become huge and node-red is (so) limited in terms of what it displays in payload/debug, one has to work around it to ouput it in an external file/console or something.
But I am wondering where in real life something like this can be used?
I am working on a project and I think it can very useful for describing/documenting what a flow is doing, providing that the node names describe its actions.
so the entire graph can be shown in the debug panel. I explicitly did not do anything with the output since everyone has their own setup. If you want to write out to disk, use a write-file node or alternatively use the http-in & response node to generate the graph on the fly
@BartButenaers that and also building bridges. Some people think in UML diagrams and its great way to explain a Node-RED flow to them by showing them a UML flowchart of the Node-RED flow. Surprisingly Node-RED flows and UML Flowcharts are very similar, UML tends to be top-to-bottom and uses more shapes (instead of colours) but showing this difference can bring understanding. Btw Mermaid flowcharts can be aligned left-to-right which makes them look nearly exactly like node-red flows.
UML usage is surprisingly widespread and having a bridge to that world can make the acceptance of Node-RED easier. Hence also the inclusion of Mermaid in Node-RED 3.1.x.
At the end of the day, it's about bridge building between two different worlds. Ironically the companies that would use Node-RED for its IIoT abilities, would probably have a different department doing UML modelling on some high-level system that they are working on.
I've just updated the flow to have a "copy to clipboard" node that copies the Mermaid flowchart code to your clipboard - I've tested on Firefox and there it works but browser copy-to-clipboard functionality various ...
Copy doesnt work for me, the debugMaxLength will do for now.
Food for thought - automatic flow description based on a group. I use mermaid in the info tab, now if only you could display them in a popup as that window is too small.
you can always use flowhub.org (excuse the self-promotion) - it displays the contents of the info tab plus it has mermaid support #justsaying - e.g. this flow.
did you have an error in the browser console? and what browser?
The implementation is available through the navigator.clipboard API which must be called within user gesture event handlers like pointerdown or pointerup , and only works for content served in a secure context (e.g. https:// )
I have broken down the flows in groups and via payload gets me going.
Would be nice if your own flow would be excluded from the output.
Link nodes act like a pipeline, for the goal of using it as "documentation" - link nodes should be excluded/transparent/directly connected.
Flow hub is public right ? Not an option
I am now using a custom endpoint with the diagrams and mermaid pulled via cdn.
I've updated the flow so that happens now - the group containing the nodes is completely removed from the mermaid graph generated. Which on the other hand, means that removing the nodes from their group will cause them to stop working, the assumption being made is that the ClientCode node is a in a group.
Yep and copyleft. Perhaps an enterprise version would make the world a better place ... but I doubt it.
Sorry for that, I have updated the flow to catch that error. It might be that you have an older version of the introspection package, i.e. ClientCode node. Either way, it should work but might not remove the group.
The problem with that is that it can bring the browser to a crawl. That was the reason the max length was set to what it is. You could end up with 10MB x however messages have been sent, all in the browser memory. And if you ever put full msg debug outputs onto the output of an http-in or http-request node, and gets lots of requests, you will soon see an impact.
Or uibuilder
It will let you output Markdown simply by loading the MarkdownIT library to your html page. Of course, you can also add the Mermaid extension for MarkdownIT. You can even sanitise input if you need to by using the DOMPurify library. The only code needed is the HTML to load the libraries.
Sorry to sound like a broken, self-serving record, but of course, uibuilder lets you manage front-end libraries so you don't always have to use external CDN's (though of course you can do that too).
Look again, I have exactly nothing to gain from uibuilder.
I use alpinejs with tailwind - the full cdn version. Tailwind requires tooling if you want to optimise, ie. this is not a frontend library you can install without using the tooling and its scaffolding setup (which I don't want).
If I want to serve them up locally, I put the full scripts in template nodes and serve them up via a custom endpoint.
This way I create complex interfaces with 2-way databinding extremely fast, that are highly performant and there is nothing that uibuilder brings to the table that gives me any sort of an advantage.
The performance of delivering scripts via template nodes isn't my idea of "highly performant". So I think there are certainly things that uibuilder could help with.
But of course, there are many ways to do anything, not trying to do a hard sell since I've nothing to gain - I don't sell uibuilder after all. Just pointing out other ways in case people want them.
The performance of delivering scripts via template nodes isn't my idea of "highly performant". So I think there are certainly things that uibuilder could help with.
There is this thing called 304 - cache, the same thing that uibuilder needs as it sends a client js library over as well. So I don't understand what your argument really is. My interfaces are extremely fast, load once and data served via websockets and everything fully dynamic.
Enough uibuilder hijacking.
@gregorius thanks again for the quick update, flow works great (somehow I dont get the copy/clipboard error now although nothing ends up in clipboard)
Already created quite some documentation with this! Time to investigate the rest of your curious nodes
Update: for all those that enjoy converting things to other things, there is now a node for converting the Node-RED flows to UML flowcharts using Mermaid.
Just pointing out other ways in case people want them.
