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. describing diagrams using Mermaid, inserting an inline image by drag and drop of an image file. This kind of Markdown extension is widely adopted by many online services and tools including GitHub and standalone Markdown editors. [スクリーンショット 2022-12-25 1.35.52]

[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 of a concern. We may be able to do some sort of lazy loading on it, so it only gets loaded if a mermaid block is detected...

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 — blockdiag 1.0 documentation

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 — blockdiag 1.0 documentation 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.

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. So, if disabled in settings.js, mermaid code block is supposed to be displayed as the original code as-is. [スクリーンショット 2022-12-27 23.12.01] instead of [スクリーンショット 2022-12-27 23.06.02]

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 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?

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 compelling reason not to at least explore the feasibility with a prototype.

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 even on-hover to display its content. Or an option to show the content right there in the flow.)

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	17	1114	30 September 2023
Mermaid rendering in the Tray Developing Nodes mermaid	13	246	9 July 2025
Where to create feature requests for flow library? Meta	3	381	18 June 2022
Node-red-contrib-markdown-note — Always-visible Markdown notes on the flow canvas Share Your Nodes	15	314	6 June 2026
Flow to Mermaid Diagram General dashboard-2	2	184	8 March 2025

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