Search code examples
docusaurusmermaid

Mermaid in tabs

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

I have:

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

Tab a

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

Tab b

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>
Solution

  • I copy/pasted the code from your docussaurus reference, so I can see the problem.

    I believe that is a bug indeed...

    This is how I managed to work-around:

    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>

    NOTES

    1. I downloaded the page that worked, from docusaurus;
    2. I trimmed all code, until it broke;
    3. I tested until I found a way to render the "wanted" result, without any extra "artifacts";
    4. Now we have a working code, but it is a workaround one.