Mermaid-Block not shown within Tabs

[bh0fer]

Describe the bug
When using mermaid diagrams inside tabs, only the initially shown tab renders the mermaid diagram, on the other tabs, the diagram is not shown. The result is the same for the compiled page and for the page running with the dev-server.

To Reproduce

Insert the following code to a mdx page in docusaurus (V2.1.0):

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
<TabItem value="tab-a">

The following mermaid diagram is shown:

```mermaid
graph LR
  a ---> c(10)
  b ---> c(10)
```

</TabItem>

<TabItem value="tab-b">

This mermaid diagram is not displayed:

```mermaid
graph LR
  d ---> z(42)
  e ---> z(42)
```

</TabItem>
</Tabs>

Expected behavior

Mermaid diagrams are rendered correctly on each tab

Screenshots

Tool chain used:

• docusaurus v2.1.0
• mermaid v9.1.6
• mdx-mermaid v1.3.2

[slorber]

official docusaurus mermaid support is coming in facebook/docusaurus#7490

Your mermaid in tabs case should work, see https://deploy-preview-7490--docusaurus-2.netlify.app/tests/pages/diagrams#mermaid-in-tabs

[lebalz]

Cool 🥳 Thanks!