facebook / facebook/docusaurus

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

Open
#8,357 8 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
52

Description

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#reporting-new-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:

> ![Tab a](https://i.stack.imgur.com/1BqvT.png)

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

> ![Tab b](https://i.stack.imgur.com/tLztM.png)

---

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

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


The following mermaid diagram is shown:

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

This mermaid diagram is not displayed:

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


### 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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.