mermaid
mermaid copied to clipboard
Graph in collapsed div's fails to render if it contains any link labels
Describe the bug
In github markdown, the <summary> notation is used to render an initially collapsed section, which can be made visible by clicking it.
Putting a TD graph with a labelled link inside such a collapsed section causes it to fail to render when the section is clicked.
If the TD graph does not contain any labelled links, it renders properly when the section is clicked.
To Reproduce
- On github, start editing a comment on an issue or pull request.
- The comment should include a collapsed section using
<summary> - The collapsed section should include a mermaid graph with a labelled link.
- The graph will fail to render, reporting "
Error rendering embedded code: Cannot read properties of undefined (reading 'x')"
Expected behavior Graphs with labelled links should render without error regardless if initially visible or not.
Screenshots
Graph without labelled links renders without error in collapsed section:
Collapsed section that renders properly
flowchart TD
A --> B[Hello]
Graph with labelled links fails to render inside collapsed section:
Collapsed section that fails to render inside collapsed section
flowchart TD
A -- Yes --> B[Hello]
Graph with labelled links renders properly if not initially collapsed:
flowchart TD
A -- Yes --> B[Hello]
Code Sample See examples above. The bug is triggered by the fact that the graph is initially invisible. I don't know how to duplicate this condition within mermaid.live
Desktop (please complete the following information):
- OS: Windows 10
- Browser Chrome Version 105.0.5195.127 (Official Build) (64-bit)
We experience the same issue with a mermaid stateDiagram-v2 diagram inside a <details> element.
Error rendering embedded code: Cannot read properties of undefined (reading 'x')
Same here, this is annoying...
Yeah it took way too long to figure out this was the problem I had and find this issue. It would be nice to have lots of graph initially hidden inside details-summary but currently it doesn't work.
Wokraround I used: init the details open <details open>
However this workaround messes the purpose why I want to collapse mermaid graphs: to keep my markdown small and not bloated.