diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/mermaid.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/mermaid.js
index b4ae5d52d..6de2a1d1e 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/mermaid.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/mermaid.js
@@ -44,7 +44,7 @@ RED.editor.mermaid = (function () {
 
             nodes.forEach(async node => {
                 if (!node.getAttribute('mermaid-processed')) {
-                    const mermaidContent = node.innerText
+                    const mermaidContent = atob($(node).data('c64'))
                     node.setAttribute('mermaid-processed', true)
                     try {
                         const { svg } = await mermaid.render('mermaid-render-'+Date.now()+'-'+(diagramIds++), mermaidContent);
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
index 4529a6923..a25259b52 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
@@ -101,7 +101,7 @@ RED.utils = (function() {
 
     renderer.code = function (code, lang) {
         if(lang === "mermaid") {
-            return `<pre class='mermaid'>${code}</pre>`;
+            return `<pre style='word-break: unset;' data-c64='${btoa(code)}' class='mermaid'>${code}</pre>`;
         } else {
             return "<pre><code>" +code +"</code></pre>";
         }