The 'Mermaid with Text Area' CodePen example doesn't allow user to rerender the graph with new values

[AMBudnik]

Description

I got the CodePend demo from https://mermaid.js.org/ecosystem/tutorials.html titled Mermaid with Text Area.
It works well when we click the render button button but it does not update.

Steps to reproduce

1. Go to https://codepen.io/Ryuno-Ki/pen/LNxwgR
2. Click the render button (graph is build correctly)
3. Change

sequenceDiagram
A->> B: Query
B->> C: Forward query
Note right of C: Thinking...
C->> B: Response
B->> A: Forward response

to

sequenceDiagram
A->> B: QueryX
B->> C: Forward query
Note right of C: Thinking...
C->> B: Response
B->> A: Forward response

Result: graph is not rendered

Screenshots

No response

Code Sample

No response

Setup

• Mermaid version: https://cdn.rawgit.com/knsv/mermaid/0.5.8/dist/mermaidAPI.js
• Browser and Version: Chrome 131, on macOS 15.1.1

Suggested Solutions

No response

Additional Context

User Story

I just want to build an option to pass what's in the textarea to the container that build the Mermaid

<div>
       <textarea name="" id="input" cols="30" rows="10" class="canvas-container">
     sequenceDiagram
     A->> B: Query
     B->> C: Forward query
     Note right of C: Thinking...
     C->> B: Response
     B->> A: Forward response
       </textarea>
     </div>
     <div>
       <button type="button" id="render" class="render-btn">Render</button>
     </div>
     <div>
       <div id="output"></div>
     </div>

     <script>
           const input = document.getElementById("input");
           const output = document.getElementById("output");
           const renderBtn = document.querySelector(".render-btn");

           mermaidAPI.initialize({startOnLoad: false});

           render.onclick = function() {
               mermaidAPI.render('theGraph', input.value, function(svgCode) {
                   output.innerHTML = svgCode;
               });
           }
     </script>