Each node in Node-RED flow can be given its description in Markdown.
Including figures in the document really help the reader to understand what the flow developer wants to describe. However, current Node-RED editor does not provide supporting mechanisms for including figures in the Markdown documents.
Therefore, I would like to propose adding the following two extensions to the Markdown editor.
The minified dist library is about 900KB ... not exactly lightweight for something most people won't see most of the time. Are there any lighter weight alternatives ? What is the advantage of including mermaid vs standard inages ?
Thanks for your comments. And sorry for the late reply.
Mermaid is supported in many services and tools such as GitHub and VSCode. So I think being able to copy and paste between them is an advantage over other extension syntax.
Regarding the memory footprint of the Mermaid library, as you written, it needs to be addressed.
Mermaid supports server-side rendering with mermaid-cli, so I thought about using it. Unfortunately, it uses puppeteer and chromium internally, and there are concerns that it may not be available in some environments.
Therefore, as @knolleary suggested, it seems better to make the library loaded on demand when mermaid extension is used in markdown document. Also, it would be better to be able to select the use of mermaid rendering in setting.js.
We can control and skip rendering of unknown/unsupported tag by Marked.js used in Node-RED editor. So, if disabled in settings.js, mermaid code block is supposed to be displayed as the original code as-is.
There appear to be several online sites that render mermaid charts (e.g. mermaid.live and markdown monster)... so just thinking out load, would it be possible to pass the mermaid text to one of those online sites, and either receive an image or embed an iframe to show the diagram?
I admit I have not looked to see if it's even feasible, but that seems like a good way to avoid loading the libraries and still see the drawings.
Or perhaps a third-party contrib node (like swagger-ui) that brings it's own version of the mermaid lib to do the rendering in the browser? But then I guess you still have the challenge of what to show when that lib is not available...
I'm not finding help that often in the help pane, other than to refresh my memory about specific message properties expected by a node. I tend to use the npm or github readme to get the big picture. Why not put the diagrams there? Maybe the flow editor could be enhanced to link to or iframe the package's page from the flow library? That could be a full-page pop-over iframe so one can read the page and then go back to coding business?
Yes, just starting to make better use of that for examples. Unfortunately, it isn't all that discoverable right now so not many people using it. What might be nice would be some kind of visual indicator in the Editor if the description tab has content (maybe just changing the colour of the icon in the node's editor panel?).
It has a lot of potential.
Certainly, I use the mermaid plugin in my Docsify tech docs for uibuilder. But that only loads the library direct from the Internet when you access the uibuilder tech docs site (either via GitHub or locally from a uibuilder node).
And for anyone like me, a bit slow, a Group can also be coloured & have a name (as mentioned in the Documentation - Documenting Flows) but what it didn't say was how to do it. So - the trick is to place the cursor over a Group boundary line and double click. (I am sure that this has been mentioned somewhere, but it flew right by me)