Mermaid rendering in the Tray

[marcus-j-davies]

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]

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]

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]

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]

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]

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

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

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

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

[marcus-j-davies]

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]

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]

Its so good, it should be banned!

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]

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]

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]

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

[AllanOricil]

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]

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