Mermaid flowcharts are not showing correctly if they start inside of a display:none styled div element

[TheWildParamecium]

Description

I am trying to generate static html reports with collapsable parts, using the display:none and display:block logic. However, I found that if a mermaid plot is placed inside one of these (initially display:none) div containers, even if you change it to a visible condition (display:block) later, the mermaid flowchart is not plotted finally.

Steps to reproduce

1. Create a div container with display:none style
2. Declare a mermaid flowchart inside that container
3. Change the display property to block of that div container some seconds after the DOM has been established

Screenshots

Code Sample

<div style="display:none" id="sub_mermaid_to">
<h1>Mermaid charts (flowcharts, timelines and so on)</h1>
<p> You can create mermaid charts using the mermaidJS syntax. Because it is not so straightforward to draw common patterns, we will leave mermaidJS documentation for further reference (<a href="https://mermaid.js.org/intro">MermaidJS documentation</a>):</p>
<p>Here are some examples of mermaid charts:</p>
<p style="font-size: 8vw;font-weight: bold;text-align: center;">Flowchart:</p>
<pre class="mermaid">

        ---
        title: Hello Title
        config:
         theme: base
         themeVariables:
           primaryColor: "#00ff00"
       ---
       graph LR;
         A --- B ;
         A --- E(5) ;
         B-->C[fa:fa-ban forbidden];
         B-->D(fa:fa-spinner);
         click A callback "Texto para el tooltip"
         click B href "#CanvasXpress-ParentNode-obj_3_"
        
</pre>
<p style="font-size: 8vw;font-weight: bold;text-align: center;">Timeline:</p>
<pre class="mermaid">

        ---
        title: Hello Title
        config:
            theme: base
            themeVariables:
            primaryColor: "#00ff00"
        ---
        timeline
        title Workflow
          section Cluster Steps
            get reliable pairs : Net Metrics
            get clusters : Cluster Metrics
                         : CDLib Metrics
            clean clusters : Cluster Metrics
                           : CDLib Metrics
            prepare and randomize clusters : Nothing                    
            cluster ranking : CRank Metrics
          section Disease Steps
            disease prediction : Disease Metrics
          section Ranker Steps
            gene ranking metrics : First Ranker Metrics
                                 : First Ranker Metrics Best Genes
            geometric mean integration : Geometric integration
            gene disease ranking : Second Ranker Metrics
                                 : Second Ranker Metrics Best Genes
            get control prediction: Phen2Gene Metrics
        
</pre>

</div>

Setup

• Mermaid version: Mermaid from CDN: https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs
• Browser and Version: Chrome 126.0.6478.126, Firefox 128.0 (64-bit)

Suggested Solutions

No response

Additional Context

No response