# Mermaid rendering in the Tray

**URL:** <https://discourse.nodered.org/t/mermaid-rendering-in-the-tray/98041>\
**Category:** Developing Nodes\
**Tags:** mermaid\
**Created:** [8 July 2025 19:22 UTC](https://discourse.nodered.org/t/mermaid-rendering-in-the-tray/98041 "2025-07-08T19:22:15Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [8 July 2025 19:22 UTC](https://discourse.nodered.org/t/mermaid-rendering-in-the-tray/98041/1 "2025-07-08T19:22:15Z")

</div>

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:

 ![Screenshot 2025-07-08 at 20.17.06](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/6/a67cc3ca7bb4f79958eb09bda3e0a632a02a238d.png)

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?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [8 July 2025 19:45 UTC](https://discourse.nodered.org/t/mermaid-rendering-in-the-tray/98041/2 "2025-07-08T19:45:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [8 July 2025 19:49 UTC](https://discourse.nodered.org/t/mermaid-rendering-in-the-tray/98041/3 "2025-07-08T19:49:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [8 July 2025 19:52 UTC](https://discourse.nodered.org/t/mermaid-rendering-in-the-tray/98041/4 "2025-07-08T19:52:27Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [8 July 2025 20:26 UTC](https://discourse.nodered.org/t/mermaid-rendering-in-the-tray/98041/5 "2025-07-08T20:26:32Z")

</div>

So, I had to do 2 things

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

```

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

 ![Screenshot 2025-07-08 at 21.23.47](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/0/00de5fdf0a2ff9f84f1a9a47122b8c25d78cde3b.png)

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

---

<div class="post-metadata">

**Author:** ![AllanOricil](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/allanoricil/32/106911_2.png) [@AllanOricil](https://discourse.nodered.org/u/AllanOricil)\
**Post date:** [8 July 2025 21:52 UTC](https://discourse.nodered.org/t/mermaid-rendering-in-the-tray/98041/6 "2025-07-08T21:52:49Z")

</div>

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

> <https://github.com/node-red/node-red/blob/master/packages%2Fnode_modules%2F%40node-red%2Feditor-client%2Fsrc%2Fjs%2Fui%2Feditor.js#L2322-L2404>

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

> <https://github.com/node-red/node-red/blob/master/packages%2Fnode_modules%2F%40node-red%2Feditor-client%2Fsrc%2Fjs%2Fui%2Feditors%2Fmermaid.js#L65>

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [9 July 2025 06:14 UTC](https://discourse.nodered.org/t/mermaid-rendering-in-the-tray/98041/7 "2025-07-09T06:14:07Z")

</div>

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 😆 ).

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [9 July 2025 12:37 UTC](https://discourse.nodered.org/t/mermaid-rendering-in-the-tray/98041/8 "2025-07-09T12:37:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [9 July 2025 15:44 UTC](https://discourse.nodered.org/t/mermaid-rendering-in-the-tray/98041/9 "2025-07-09T15:44:38Z")

</div>

Its so good, it should be banned!

![Jul-09-2025 16-44-01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/c/4c3f6dc0d25e686997ff694af0be4cc335d1e96a.gif)

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

```auto
<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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [9 July 2025 16:41 UTC](https://discourse.nodered.org/t/mermaid-rendering-in-the-tray/98041/10 "2025-07-09T16:41:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [9 July 2025 16:43 UTC](https://discourse.nodered.org/t/mermaid-rendering-in-the-tray/98041/11 "2025-07-09T16:43:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [9 July 2025 16:46 UTC](https://discourse.nodered.org/t/mermaid-rendering-in-the-tray/98041/12 "2025-07-09T16:46:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AllanOricil](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/allanoricil/32/106911_2.png) [@AllanOricil](https://discourse.nodered.org/u/AllanOricil)\
**Post date:** [9 July 2025 17:12 UTC](https://discourse.nodered.org/t/mermaid-rendering-in-the-tray/98041/13 "2025-07-09T17:12:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [9 July 2025 19:35 UTC](https://discourse.nodered.org/t/mermaid-rendering-in-the-tray/98041/14 "2025-07-09T19:35:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [7 September 2025 19:36 UTC](https://discourse.nodered.org/t/mermaid-rendering-in-the-tray/98041/15 "2025-09-07T19:36:27Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.