# Node-RED Mermaid rendering is off-by-one

**URL:** <https://discourse.nodered.org/t/node-red-mermaid-rendering-is-off-by-one/97546>\
**Category:** Core Development\
**Tags:** mermaid\
**Created:** [11 June 2025 08:08 UTC](https://discourse.nodered.org/t/node-red-mermaid-rendering-is-off-by-one/97546 "2025-06-11T08:08:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [11 June 2025 08:08 UTC](https://discourse.nodered.org/t/node-red-mermaid-rendering-is-off-by-one/97546/1 "2025-06-11T08:08:21Z")

</div>

Hi There,

I've been doing some mermaid diagramming and noticed a couple of irregularities inside Node-RED.

1. Labels are being cut indiscriminately

 ![Screenshot 2025-06-11 at 09.43.52](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/a/1ae0f199ff7f688998e899c798a201a598ff11d0.png)

should be:

 ![Screenshot 2025-06-11 at 09.44.51](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/8/2852b0c95eb8ca02ff1b45b67b499360a674a2d3.png)

(`handle_event({registere` versus `handle_event({registered})/2`)

1. Line breaks in labels being ignored

 ![Screenshot 2025-06-11 at 09.48.14](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/8/a841bceb3685582ff7bfe761bfa4461c489c8ce1.png)

should be

 ![Screenshot 2025-06-11 at 09.48.43](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/2/a2d970f5bb686c0d2e5378fa4a2ff715d09b4710.png)

(text in the boxes is two lined not singled lined).

Being slightly autistic, these things annoy me incredibly, so I have to find a fix. Anyway I narrowed it down to the [`innerText` stuff](https://github.com/node-red/node-red/blob/36afe1ebd00d7a21888268ea6ec3fe6db8b78845/packages/node_modules/%40node-red/editor-client/src/js/ui/editors/mermaid.js#L46-L48). It uses escaped HTML that makes `&lt;` become `<` again - this made the mermaid render ignore text thinking it's was a html tag. So I thought `innerHTML` would help but it didn't.

The cutting of label text was simpler: it has to do with the `pre` element having a `word-break: break-all` definition somewhere.

To fix both issues, I made the following changes:

1. this [line](https://github.com/node-red/node-red/blob/36afe1ebd00d7a21888268ea6ec3fe6db8b78845/packages/node_modules/%40node-red/editor-client/src/js/ui/utils.js#L104) became

```auto
return `<pre style='word-break: unset;' data-c64='${btoa(code)}' class='mermaid'>${code}</pre>`;

```

1. and this [line](https://github.com/node-red/node-red/blob/36afe1ebd00d7a21888268ea6ec3fe6db8b78845/packages/node_modules/%40node-red/editor-client/src/js/ui/editors/mermaid.js#L47) became

```auto
const mermaidContent = atob($(node).data('c64'))

```

and that was it, fixed.

I've applied the fix to where I need it, just wanted to the let the core developers know.

Mermaid code:

````auto
```mermaid
%% Generated by the Flow2UML Node @ https://flowhub.org/flow2uml
%% change direction to LR for Node-RED left-to-right UML
graph RL
96a8c3ef5146bfea@{ shape: "st-rect", label: "system \n &lt;ered_nodes.erl&gt;" } -- "handle_event#40;#123;registered#125;#41;#47;2" --> 96e2e43870db30c7@{ shape: "rect", label: "link in node \n &lt;ered_node_link_in&gt;" }
96e2e43870db30c7@{ shape: "rect", label: "link in node \n &lt;ered_node_link_in&gt;" } -- "ered_link_node_exchange:register_link_in#47;3" --> 66abe9b3d7951c38@{ shape: "cyl", label: "ered_link_node_exchange \n &lt;ered_link_node_exchange&gt;" }
subgraph "start up time"
96a8c3ef5146bfea
96e2e43870db30c7
66abe9b3d7951c38
end

````

````auto
```mermaid
%% Generated by the Flow2UML Node @ https://flowhub.org/flow2uml
%% change direction to LR for Node-RED left-to-right UML
graph LR
6ebebfbd704dfda2@{ shape: "rect", label: "link out node \n &lt;ered_node_link_out&gt;" } -. " **#40;11#41;**! #123;link_return, Msg#125;" .-> 8e133d66e6af0eed@{ shape: "rect", label: "link call &lt;ered_node_link_call&gt;" }
e33d87ec3cc38aca@{ shape: "rect", label: "ered_node_inject \n &lt;ered_node&gt;" } -. " **#40;1#41;** ered_msg_handling:create_outgoing_msg#47;1" .-> e6eab90d2828637c@{ shape: "stadium", label: "#35;#123;Msg#125;" }
e6eab90d2828637c@{ shape: "stadium", label: "#35;#123;Msg#125;" } -. " **#40;2#41;** #123;incoming, Msg#125;" .-> 8e133d66e6af0eed@{ shape: "rect", label: "link call &lt;ered_node_link_call&gt;" }
8e133d66e6af0eed@{ shape: "rect", label: "link call &lt;ered_node_link_call&gt;" } <-- " **#40;3#41;** ered_link_node_exchange:obtain_link_node_pid#47;2" --> 7a076cbf3b2b4e25@{ shape: "cyl", label: "ered_link_node_exchange \n &lt;ered_link_node_exchange&gt;" }
8e133d66e6af0eed@{ shape: "rect", label: "link call &lt;ered_node_link_call&gt;" } <-- " **#40;4#41;** maps:put#40;'_link_source'#41;" --> e6eab90d2828637c@{ shape: "stadium", label: "#35;#123;Msg#125;" }
8e133d66e6af0eed@{ shape: "rect", label: "link call &lt;ered_node_link_call&gt;" } -. " **#40;12#41;** ered_nodes:send_msg_to_connected_nodes#47;2" .-> 3b1ca50e8775f40a@{ shape: "rect", label: "debug 1 \n &lt;ered_node_debug&gt;" }
8e133d66e6af0eed@{ shape: "rect", label: "link call &lt;ered_node_link_call&gt;" } -. " **#40;5#41;** ered_nodes:send_msg_on_by_pids#47;2" .-> 0403088d0d9bebe6@{ shape: "rect", label: "link in node \n &lt;ered_node_link_in&gt;" }
subgraph "link call flow"
e33d87ec3cc38aca
e6eab90d2828637c
8e133d66e6af0eed
3b1ca50e8775f40a
end

````

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [11 June 2025 08:10 UTC](https://discourse.nodered.org/t/node-red-mermaid-rendering-is-off-by-one/97546/2 "2025-06-11T08:10:16Z")

</div>

Any interest in raising an issue or a pull request with the details in?

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [11 June 2025 08:11 UTC](https://discourse.nodered.org/t/node-red-mermaid-rendering-is-off-by-one/97546/3 "2025-06-11T08:11:26Z")

</div>

If the fix, as it stands, is ok with you, then it's a case of using github editor and not need to clone the repo locally....

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [11 June 2025 08:23 UTC](https://discourse.nodered.org/t/node-red-mermaid-rendering-is-off-by-one/97546/4 "2025-06-11T08:23:31Z")

</div>

> <https://github.com/node-red/node-red/pull/5167>
>
> \- \[x\] Bugfix (non-breaking change which fixes an issue)
> \- \[\] New feature (non-…breaking change which adds functionality)
> 
> 
> 
> \## Proposed changes
> 
> A fix to the rendering of mermaid diagrams in Node-RED - see https://discourse.nodered.org/t/node-red-mermaid-rendering-is-off-by-one/97546 for details
> 
> 
> 
> \## Checklist
> 
> 
> \- \[x\] I have read the \[contribution guidelines\](https://github.com/node-red/node-red/blob/master/CONTRIBUTING.md)
> \- \[\] For non-bugfix PRs, I have discussed this change on the forum/slack team.
> \- \[\] I have run \`npm run test\` to verify the unit tests pass
> \- \[\] I have added suitable unit tests to cover the new/changed functionality

it was all possible in github - yeah.

---

<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:** [10 August 2025 08:23 UTC](https://discourse.nodered.org/t/node-red-mermaid-rendering-is-off-by-one/97546/5 "2025-08-10T08:23:54Z")

</div>

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