fix: rerender mermaid diagrams on tab switch

samples/seed/articles/markdown.md

@@ -124,6 +124,15 @@ TypeScript content for Windows...
 
 REST API content, independent of platform...
 
+```mermaid
+flowchart LR
+
+A[Hard] -->|Text| B(Round)
+B --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Two| E[Result 2]
+```
+
 ---
 
 Notice how changing the Linux/Windows selection above changes the content in the .NET and TypeScript tabs. This is because the tab group defines two versions for each .NET and TypeScript, where the Windows/Linux selection above determines which version is shown for .NET/TypeScript. Here's the markup that shows how this is done:

templates/modern/src/markdown.ts

@@ -32,24 +32,36 @@ async function renderMath() {
   }
 }
 
+let mermaidRenderCount = 0
+
 /**
  * Render mermaid diagrams.
  */
 async function renderMermaid() {
-  const diagrams = document.querySelectorAll('pre code.lang-mermaid')
+  const diagrams = document.querySelectorAll<HTMLElement>('pre code.lang-mermaid')
   if (diagrams.length <= 0) {
     return
   }
 
   const { default: mermaid } = await import('mermaid')
   const theme = getTheme() === 'dark' ? 'dark' : 'default'
-  mermaid.initialize(Object.assign({ startOnLoad: false, deterministicIds: true, theme }, window.docfx.mermaid))
 
+  // Turn off deterministic ids on re-render
+  const deterministicIds = mermaidRenderCount === 0
+  mermaid.initialize(Object.assign({ startOnLoad: false, deterministicIds, theme }, window.docfx.mermaid))
+  mermaidRenderCount++
+
+  const nodes = []
   diagrams.forEach(e => {
-    e.parentElement.classList.add('mermaid')
-    e.parentElement.innerHTML = e.innerHTML
+    // Rerender when elements becomes visible due to https://github.com/mermaid-js/mermaid/issues/1846
+    if (e.offsetParent) {
+      nodes.push(e.parentElement)
+      e.parentElement.classList.add('mermaid')
+      e.parentElement.innerHTML = e.innerHTML
+    }
   })
-  await mermaid.run()
+
+  await mermaid.run({ nodes })
 }
 
 /**
@@ -379,6 +391,7 @@ function renderTabs() {
       }
       updateTabsQueryStringParam(state)
     }
+    notifyContentUpdated()
     const top = info.anchor.getBoundingClientRect().top
     if (top !== originalTop && event instanceof MouseEvent) {
       window.scrollTo(0, window.pageYOffset + top - originalTop)
@@ -434,4 +447,8 @@ function renderTabs() {
     document.querySelectorAll('div.tabGroup>ul>li>a').forEach(e => e.classList.add('nav-link'))
     document.querySelectorAll('div.tabGroup>section').forEach(e => e.classList.add('card'))
   }
+
+  function notifyContentUpdated() {
+    renderMermaid()
+  }
 }