Mermaid rendering in the Tray

marcus-j-davies · 8 July 2025 19:22

Working tirelessly on an upcoming major release to my node, I intend to replace the Network Topology Map, with Mermaid.

I know that the Markdown/help has support for it, is there a way it can be used in the tray?

Example:

if not, do you see any bad reason. I cant include as part of the package?
if so, is there a way I can register the Node RED FA package?

EDIT:
As the tray is within the editor runtime, I guess I can call into mermaid to Rendner it out no?

Steve-Mcl · 8 July 2025 19:45

You can access RED.utils.renderMarkdown which should render a mermaid code fence. I'm not at computer to see if we expose mermaid for direct rendering.

marcus-j-davies · 8 July 2025 19:49

Thanks Steve!

I'm currently able to init a new instance of mermaid in my bootstrap javascript
(Given the editor has the sources loaded), and use that...

But would much prefer using the built in instance.

will have a play with RED.utils.renderMarkdown. -Thanks

Steve-Mcl · 8 July 2025 19:52

I think that would be wise. If we ever swap the renderer or it's API changes, your node would break (and you'd have to do some version tests to be backwards compatible)

marcus-j-davies · 8 July 2025 20:26

So, I had to do 2 things

RED.utils.renderMarkdown(txt)
RED.editor.mermaid.render()

Whilst this works, don't like tapping into private API's

I guess that isn't really for public use? (RED.editor.mermaid.render())

AllanOricil · 8 July 2025 21:52

If it was private they would have not exposed mermaid in the editor module. Check the module.

Wait... how did you use RED.editor.mermaid if it isn't available

github.com/node-red/node-red

packages%2Fnode_modules%2F%40node-red%2Feditor-client%2Fsrc%2Fjs%2Fui%2Feditor.js

master


      
          return {
              init: function() {
                  if(window.ace) { window.ace.config.set('basePath', 'vendor/ace'); }
                  RED.tray.init();
                  RED.actions.add("core:confirm-edit-tray", function() {
                      $(document.activeElement).blur();
                      $("#node-dialog-ok").trigger("click");
                      $("#node-config-dialog-ok").trigger("click");
                  });
                  RED.actions.add("core:cancel-edit-tray", function() {
                      $(document.activeElement).blur();
                      $("#node-dialog-cancel").trigger("click");
                      $("#node-config-dialog-cancel").trigger("click");
                  });
                  RED.editor.codeEditor.init();
              },
              generateViewStateId: generateViewStateId,
              edit: showEditDialog,
              editConfig: showEditConfigNodeDialog,
              editFlow: showEditFlowDialog,

This file has been truncated. show original

Ok. I found it. You are ok to use it like that. It is public.

github.com/node-red/node-red

packages%2Fnode_modules%2F%40node-red%2Feditor-client%2Fsrc%2Fjs%2Fui%2Feditors%2Fmermaid.js

master


      
                                      border: '1px solid var(--red-ui-border-color-error)',
                                      padding: '5px',
                                      marginBottom: '10px',
                                  }).text(err.toString()).prependTo(node)
                              }
                          }
                      })
                  }
              }  
              return {
                  render: render,
              };
          })();

marcus-j-davies · 9 July 2025 06:14

Thanks @AllanOricil

It's not so much being able to access the methods, as it is if we should be.
RED.utils I am ok with - as it's documented in the API for developers, but using methods from RED.editor was it intended to be used by Node Developers?

Evan the tray shown in my screenshot, I wanted to make sure was ok to use (it is ).

marcus-j-davies · 9 July 2025 12:37

So….

After thinking, I’m going to include the package myself and do the esm import in my client editor bootstrap code - this then shouldn’t interfere with Node RED.

marcus-j-davies · 9 July 2025 15:44

Its so good, it should be banned!

Jul-09-2025 16-44-01

For those wishing to use mermaid in their Nodes, and not interfere with Node RED's use.

<script type="module">
	import beautifulLookingMermaid  from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
	window.beautifulLookingMermaid = beautifulLookingMermaid
</script>

Then use beautifulLookingMermaid
in your Node HTML, Side Bar, Tray - whatever it might be.

Just keep your mermaid import reference unique

TotallyInformation · 9 July 2025 16:41

The downside of that being that you have to be connected to the Internet for that to work of course. Not all Node-RED users are connected/can connect.

marcus-j-davies · 9 July 2025 16:43

Yup,
I figured I’d take the chance.

Node RED is also pulling it in via the client - so no loss in benefit currently

I was going to include it - but the NPM package of mermaid is >40mb

TotallyInformation · 9 July 2025 16:46

Yes, I do wish that import had a fallback capability.

AllanOricil · 9 July 2025 17:12

Try to bundle it using rollup, vite or the new rolldown. I saw that mermaid is esm, and possibly good support for tree shaking. This means that after tree shaking you may end up using a few kbs of the whole mermaid library.

TotallyInformation · 9 July 2025 19:35

Or using ESBUILD which is great for building CJS versions of modules from ESM ones.

Topic		Replies	Views
[Proposal] Support of Inline Figure in Markdown Editor Core Development	22	665	16 March 2023
Node-RED flow to Mermaid diagram General	18	757	29 November 2023
Mermaid xychart-beta support in markdown node Dashboard dashboard-2	3	101	27 September 2024
Using markdown directly to document the nodes Developing Nodes	19	1224	4 October 2021
Dynamic Mermaid in Markdown Developing Nodes dashboard-2	8	191	4 May 2024

Mermaid rendering in the Tray

Related topics