-
-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Mermaid in tabs. The arrows are not displayed in the second tab #8357
Comments
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 |
@slorber , I used this proposed workaround: https://stackoverflow.com/a/74479494/5734097
|
Hello everyone! I did a little survey about this issue.
The above element is a child of g element, that has an If I changed the second tab's url function to 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 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> |
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). Tabs_Issue.mov |
While investigating #9032, found out that Mermaid is not great at rendering diagrams concurrently, and we should ensure to render them sequentially one after the other. 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. |
Have you read the Contributing Guidelines on issues?
Prerequisites
npm run clear
oryarn clear
command.rm -rf node_modules yarn.lock package-lock.json
and re-installing packages.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
Reproducible demo
No response
Steps to reproduce
Expected behavior
Arrows are displayed in all tabs
Actual behavior
The arrows are not displayed in the second tab
Your environment
Self-service
The text was updated successfully, but these errors were encountered: