mermaid.render() returns 'undefined' for svgCode in Blazor.

[sby-a-izumi]

Description

I expected return svgCode with 'await mermaid.render('Id', mermaidText)' but returns 'undefined'.

My code is bellow.

const { svgCode, bindFunctions } = await mermaid.render('hogehoge', graph TB\na-->b');
console.log(svgCode); // undefined

Steps to reproduce and Code Sample

1. Edit App.razor for initialize mermaid.

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  window.mermaid = mermaid;
</script>

2. Create razor file for page.

<div id="hogehoge"></div>

3. Create razor.cs file for page.

protected override async Task OnParametersSetAsync()
{
  // Initialize mermaid.
  await JSRuntime.InvokeVoidAsync("initializeMermaid");

  // Render mermaid.
  var testMermaidText = "graph TB\na-->b");
  var svg = await JSRuntime.InvokeAsync<string>("renderMermaidToSVG", testMermaidText);
}

4. Create javaScript file.

window.initializeMermaid = async () => {
  await mermaid.initialize({ startOnLoad: false });
};

window.renderMermaidToSVG = async (mermaidText) => {
  try {
    const div = document.getElementById('hogehoge');
    if (!div) {
      throw new Error('Div not found.');
      console.log("error occured.");
    }
    // Logging document.
    console.log("document");
    console.log(document);

    // Logging div.
    console.log("div");
    console.log(div); 

    // Ensure mermaid is initialized befor rendering
    if (typeof mermaid === 'undefined' || !mermaid) {
      throw new Error('Mermaid is not initialized');
    }

    // Logging mermaid.
    console.log("mermaid");
    console.log(mermaid);

    // Logging mermaid text.
    console.log("text");
    console.log(mermaidText);

    const { svgCode, bindFunctions } = await mermaid.render('hogehoge', mermaidText );
    // Logging svgCode.
    console.log("svgCode");
    console.log(svgCode);

    return svgCode;
  } catch (error) {
    throw error;
  }
};

Screenshots

The browser's developer tools show that “undefined” is returned for svgCode.

Setup

• Mermaid version:
• Browser and Version: [Chrome, Edge, Firefox]

Suggested Solutions

No response

Additional Context

No response