diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.html b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.html
index 7fc9c960008..d4cca50dc73 100644
--- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.html
+++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.html
@@ -340,7 +340,7 @@ <h2 id="image">Image<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-
 <p><a target="_blank" rel="noopener noreferrer nofollow" href="https://learn.microsoft.com/en-us/media/learn/not-found/learn-not-found-light-mode.png?branch=main"><img src="https://learn.microsoft.com/en-us/media/learn/not-found/learn-not-found-light-mode.png?branch=main" alt="alt-text"></a></p>
 <h2 id="mermaid-diagrams">Mermaid Diagrams<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="#" href="#mermaid-diagrams" style="margin-left: 0.1875em; padding-right: 0.1875em; padding-left: 0.1875em;"></a></h2>
 <p>Flowchart</p>
-<pre class="mermaid" data-processed="true"><div id="dmermaid-0" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;"><svg id="mermaid-0" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g></g></svg></div></pre>
+<pre class="mermaid" data-processed="true"><svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="-8 -8 526.5 144" style="max-width: 526.5px;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid-0"><style>#mermaid-0{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-0 .error-icon{fill:#552222;}#mermaid-0 .error-text{fill:#552222;stroke:#552222;}#mermaid-0 .edge-thickness-normal{stroke-width:2px;}#mermaid-0 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-0 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-0 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-0 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-0 .marker{fill:#333333;stroke:#333333;}#mermaid-0 .marker.cross{stroke:#333333;}#mermaid-0 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-0 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-0 .cluster-label text{fill:#333;}#mermaid-0 .cluster-label span,#mermaid-0 p{color:#333;}#mermaid-0 .label text,#mermaid-0 span,#mermaid-0 p{fill:#333;color:#333;}#mermaid-0 .node rect,#mermaid-0 .node circle,#mermaid-0 .node ellipse,#mermaid-0 .node polygon,#mermaid-0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-0 .flowchart-label text{text-anchor:middle;}#mermaid-0 .node .label{text-align:center;}#mermaid-0 .node.clickable{cursor:pointer;}#mermaid-0 .arrowheadPath{fill:#333333;}#mermaid-0 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-0 .flowchart-link{stroke:#333333;fill:none;}#mermaid-0 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-0 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-0 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-0 .cluster text{fill:#333;}#mermaid-0 .cluster span,#mermaid-0 p{color:#333;}#mermaid-0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-0 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-0 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="10" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"></path></marker><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="0" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart" id="flowchart-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart" id="flowchart-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path marker-end="url(#flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-A LE-B" id="L-A-B-0" d="M49.688,64L56.299,64C62.911,64,76.135,64,89.359,64C102.583,64,115.807,64,122.419,64L129.031,64"></path><path marker-end="url(#flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-B LE-C" id="L-B-C-0" d="M191.188,64L195.354,64C199.521,64,207.854,64,216.271,64.083C224.688,64.167,233.188,64.333,237.438,64.417L241.688,64.5"></path><path marker-end="url(#flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-C LE-D" id="L-C-D-0" d="M339.01,46.463L348.62,41.969C358.231,37.475,377.451,28.488,393.749,23.994C410.047,19.5,423.422,19.5,430.109,19.5L436.797,19.5"></path><path marker-end="url(#flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-C LE-E" id="L-C-E-0" d="M339.01,82.537L348.62,86.864C358.231,91.191,377.451,99.846,393.749,104.173C410.047,108.5,423.422,108.5,430.109,108.5L436.797,108.5"></path></g><g class="edgeLabels"><g transform="translate(89.359375, 64)" class="edgeLabel"><g transform="translate(-14.671875, -12)" class="label"><foreignObject height="24" width="29.34375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">Text</span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g transform="translate(396.671875, 19.5)" class="edgeLabel"><g transform="translate(-15.125, -12)" class="label"><foreignObject height="24" width="30.25"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">One</span></div></foreignObject></g></g><g transform="translate(396.671875, 108.5)" class="edgeLabel"><g transform="translate(-14.671875, -12)" class="label"><foreignObject height="24" width="29.34375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">Two</span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(24.84375, 64)" id="flowchart-A-16" class="node default default flowchart-label"><rect height="39" width="49.6875" y="-19.5" x="-24.84375" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-17.34375, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="34.6875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Hard</span></div></foreignObject></g></g><g transform="translate(160.109375, 64)" id="flowchart-B-17" class="node default default flowchart-label"><rect height="39" width="62.15625" y="-19.5" x="-31.078125" ry="5" rx="5" style="" class="basic label-container"></rect><g transform="translate(-23.578125, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="47.15625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Round</span></div></foreignObject></g></g><g transform="translate(298.8671875, 64)" id="flowchart-C-19" class="node default default flowchart-label"><polygon style="" transform="translate(-57.6796875,57.6796875)" class="label-container" points="57.6796875,0 115.359375,-57.6796875 57.6796875,-115.359375 0,-57.6796875"></polygon><g transform="translate(-30.6796875, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="61.359375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Decision</span></div></foreignObject></g></g><g transform="translate(473.6484375, 19.5)" id="flowchart-D-21" class="node default default flowchart-label"><rect height="39" width="73.703125" y="-19.5" x="-36.8515625" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-29.3515625, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="58.703125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Result 1</span></div></foreignObject></g></g><g transform="translate(473.6484375, 108.5)" id="flowchart-E-23" class="node default default flowchart-label"><rect height="39" width="73.703125" y="-19.5" x="-36.8515625" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-29.3515625, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="58.703125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Result 2</span></div></foreignObject></g></g></g></g></g></svg></pre>
 <h2 id="code-snippet">Code Snippet<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="#" href="#code-snippet" style="margin-left: 0.1875em; padding-right: 0.1875em; padding-left: 0.1875em;"></a></h2>
 <p>The example highlights lines 2, line 5 to 7 and lines 9 to the end of the file.</p>
 <pre><code class="lang-csharp hljs language-csharp" highlight-lines="2,5-7,9-"><span class="hljs-keyword">using</span> System;
@@ -521,4 +521,4 @@ <h5 class="border-bottom">In this article</h5>
       </div>
     </footer>
   
-</body></html>
\ No newline at end of file
+<div class="mermaidTooltip" style="opacity: 0;"></div></body></html>
\ No newline at end of file