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 docum…

[image] dceejay: What is the advantage of including mermaid vs standard inages ? Mermaid is stored inline as editable text, rather than having to figure out how to inline an image. I've found it super useful since GitHub added support for it in issues etc. The size of the library is a bit o…

It does seem to drag in a(nother) complete version of d3 as part of itself. Alternatives - for example there is blockdiag... which is available as an extension to markdown-it which we already use... - markdown-it-blockdiag - npm Main web page - blockdiag - simple diagram images generator — blockdi…

Thanks for your comments. And sorry for the late reply. [image] dceejay: Alternatives - for example there is blockdiag... which is available as an extension to markdown-it which we already use... - markdown-it-blockdiag - npm Main web page - blockdiag - simple diagram images generator — bloc…

Yes puppeteer and chromium would be even worse. (Even if serverside - when the server is a pi). As for settings. Not sure how that helps. If a node has the markup in and the setting is off then it will render badly. I don’t think we could skip the “unknown” tags can we ?

[image] dceejay: As for settings. Not sure how that helps. If a node has the markup in and the setting is off then it will render badly. I don’t think we could skip the “unknown” tags can we ? We can control and skip rendering of unknown/unsupported tag by Marked.js used in Node-RED editor. …

Yes. Which makes no sense to a user. Just looks bad. So we would need to intercept and blank out

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 no…

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 pack…

This is more related to a user being able to document their own flows, rather than node help. Given the general popularity of mermaid, I'd be wary of adopting a different library at this point. Nor would we want to introduce a dependency in an external service to do the rendered. I don't see a com…

Oh, I see, I had completely missed the the fact that this is supposed to be for comment nodes. Then IMHO implement a contributed diagram-comment node. I mean, the NR flow editor is already 5MB+... (This is tangential, but I'm always frustrated by the comment node. I wish it had a simple pop-up or e…

Node-RED

Node-RED Forum

[Proposal] Support of Inline Figure in Markdown Editor

Core Development

drmibell 27 December 2022 18:27 15

On that tangent, the pop-up or on-hover has been the subject of some debate...

Topic		Replies	Views
Node-RED flow to Mermaid diagram General	18	919	29 November 2023
Mermaid rendering in the Tray Developing Nodes mermaid	14	180	7 September 2025
Where to create feature requests for flow library? Meta	4	352	18 July 2022
Flow to Mermaid Diagram General dashboard-2	3	120	6 June 2025
Using markdown directly to document the nodes Developing Nodes	19	1308	4 October 2021

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

[Proposal] Support of Inline Figure in Markdown Editor

Related topics