mermaid icon indicating copy to clipboard operation
mermaid copied to clipboard

Graph in collapsed div's fails to render if it contains any link labels

Open drok opened this issue 3 years ago • 1 comments

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

  1. On github, start editing a comment on an issue or pull request.
  2. The comment should include a collapsed section using <summary>
  3. The collapsed section should include a mermaid graph with a labelled link.
  4. 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)

drok avatar Sep 22 '22 13:09 drok

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')

nifr avatar Feb 05 '23 21:02 nifr

Same here, this is annoying...

matthyx avatar Aug 11 '23 05:08 matthyx

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.

aki-kesulahti avatar Feb 21 '24 09:02 aki-kesulahti