Mermaid in tabs. The arrows are not displayed in the second tab

[vshitov]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Prerequisites

• [X] I'm using the latest version of Docusaurus.
• [X] I have tried the npm run clear or yarn clear command.
• [ ] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• [ ] I have tried creating a repro with https://new.docusaurus.io.
• [ ] I have read the console error message carefully (if applicable).

Description

Discussion from https://stackoverflow.com/questions/74474982/mermaid-in-tabs

The arrows are not displayed in the second tab It works here https://docusaurus.io/tests/pages/diagrams#mermaid-in-tabs

I have:

a) In "tab-a", the arrows are displayed:

b) But in "tab-b", the arrows are not displayed:

---

Version of docusaurus: 2.2.0
Type files: .md or .mdx

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>

Reproducible demo

No response

Steps to reproduce

1. Create new file .md
2. Add mermaid diagram graph LR in two tab

Expected behavior

Arrows are displayed in all tabs

Actual behavior

The arrows are not displayed in the second tab

Your environment

• Docusaurus version used: 2.2.0

Self-service

• [ ] I'd be willing to fix this bug myself.

[slorber]

Can reproduce, not sure why it happens 😅 if anyone wants to investigate. Not even sure it's a Docusaurus bug.

A good-enough temporary workaround is <Tabs lazy>, which will only render one tab at a time

[mx3coding]

@slorber , I used this proposed workaround: https://stackoverflow.com/a/74479494/5734097 Maybe it helps to find the solution, because it looks like its missing some kind of initialization.

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

# Mermaid in tabs
  
<!-- [start] add this to avoid the possible bug. Note: the empty line before [```] is necessary -->
```mermaid
flowchart TD

```
<!-- [end] add this to avoid the possible bug -->


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

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

</TabItem>

<TabItem value="tab-b">

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

</TabItem>
</Tabs>

[k0i]

Hello everyone!

I did a little survey about this issue.

<path marker-end="url(#flowchart-pointEnd)" style="fill:none;" ...></path>

The above element is a child of g element, that has an edgePath class and describes paths between nodes. And I noticed that url(#flowchart-pointEnd) 's result may refer to a different component https://w3c.github.io/csswg-drafts/css-values/#local-urls

If I changed the second tab's url function to url(#flowchart-pointEnd2) and modify the element's id, all of elements are correctly rendered.

On top of that, if I delete the second tab's flow-chart-pointEnd element, it brings no change and it may reinforce the hypothesis that the url function directs to a different element.

But, I'm still not sure why inserting another element that has flowchart-pointEnd element into the outside of the tab works as a workaround....

This gif may also indicates that the url function interfere with each other....

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

# Mermaid in tabs

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

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

</TabItem>

<TabItem value="tab-b">

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

</TabItem>
</Tabs>

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

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

</TabItem>

<TabItem value="tab-d">
```mermaid
graph LR
  d ---> z(42)
  e ---> z(42)
```

</TabItem>
</Tabs>

[pusolito]

I have a similar issue, but with a different component in a second tab. I'm using the kotlin-playground component, which is based on CodeMirror. My code item does not render properly in the second tab (it is partially initialized). But it works fine if I use lazy tabs. One thing to note is that resizing the browser window causes the component to update like it does when first clicked, but it is still not properly displayed after this. Using a lazy tab completely eliminates this issue. But it is not a good option for my use case, since that means tabs are created every time they are selected (not just the first time, as you'd imagine).

https://user-images.githubusercontent.com/9815928/228273231-c5352f3d-a1e9-4a8c-99cb-4541df91c10a.mov

[slorber]

While investigating https://github.com/facebook/docusaurus/issues/9032, found out that Mermaid is not great at rendering diagrams concurrently, and we should ensure to render them sequentially one after the other.

See https://github.com/mermaid-js/mermaid/issues/3577

I suspect we'll have to build fancy things like a rendering queue so that different components (in this case tabs) do not attempt to render diagrams concurrently.