Bug reportAug 29, 2026· 0:26· 11 views
Docusaurus: Mermaid diagram arrows missing in second tab (Tabs component)
0:26 total
Comments · 0
Be the first to comment.
Bug report— by SceneRecap AI
mediumTheme / Mermaid Diagram Component / Tabs integration
os: macOSbrowser: Chromium 151.0.7922.34viewport: 1280x720
Repro steps
- 1.Navigate to the diagrams page (/tests/pages/diagrams) and scroll to 'Mermaid in tabs'.
- 2.Observe that 'tab-a' renders the Mermaid diagram with full arrows and markers.
- 3.Click on 'tab-b' to view the second tab's diagram.
Expected
The Mermaid diagram in tab-b should render correctly with all connection arrows and markers intact.
Actual
The diagram in tab-b renders nodes ('d', 'e', '42') but the arrowheads and line markers connecting the nodes are missing or improperly styled.
Evidence
visualUnder tab-a at 0.0s, the diagram renders full arrows connecting nodes 'a' and 'b' to node '10'.
visualAfter switching to tab-b at 13.0s, the connecting lines leading into node '42' are missing arrowheads.
visualSwitching back to tab-a at 23.0s shows the original tab diagram still renders arrows correctly (control).
Issue markdown (copy-paste ready)
### Summary When a Mermaid diagram is nested within a non-active tab in a `Tabs` component, switching to that tab renders the diagram without arrowheads/connection markers. ### Repro Steps 1. Open `/tests/pages/diagrams`. 2. Scroll down to the **Mermaid in tabs** section. 3. Note that the default active tab (`tab-a`) renders its flowchart diagram properly with visible arrowheads. 4. Click the `tab-b` tab. ### Expected Result The diagram in `tab-b` displays fully, including arrowheads connecting nodes `d` and `e` to `42`. ### Actual Result The diagram nodes render, but the arrows pointing into node `42` lack marker arrowheads due to SVG definition/rendering issues in inactive tabs. *Recorded with SceneRecap.*
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →