Node-RED Mermaid rendering is off-by-one

[gregorius]

Hi There,

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

1. Labels are being cut indiscriminately

should be:

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

2. Line breaks in labels being ignored

should be

(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. It uses escaped HTML that makes < 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 became

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

2. and this line became

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:

```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 <ered_nodes.erl>" } -- "handle_event#40;#123;registered#125;#41;#47;2" --> 96e2e43870db30c7@{ shape: "rect", label: "link in node \n <ered_node_link_in>" }
96e2e43870db30c7@{ shape: "rect", label: "link in node \n <ered_node_link_in>" } -- "ered_link_node_exchange:register_link_in#47;3" --> 66abe9b3d7951c38@{ shape: "cyl", label: "ered_link_node_exchange \n <ered_link_node_exchange>" }
subgraph "start up time"
96a8c3ef5146bfea
96e2e43870db30c7
66abe9b3d7951c38
end

```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 <ered_node_link_out>" } -. "**#40;11#41;** ! #123;link_return, Msg#125;" .-> 8e133d66e6af0eed@{ shape: "rect", label: "link call <ered_node_link_call>" }
e33d87ec3cc38aca@{ shape: "rect", label: "ered_node_inject \n <ered_node>" } -. "**#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 <ered_node_link_call>" }
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

[knolleary]

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

[gregorius]

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

[gregorius]

Gorenje mermaid fix

it was all possible in github - yeah.