Skip to content
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

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

Open
drok opened this issue Sep 22, 2022 · 3 comments
Open

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

drok opened this issue Sep 22, 2022 · 3 comments
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect

Comments

@drok
Copy link

drok commented Sep 22, 2022

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 drok added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Sep 22, 2022
@nifr
Copy link

nifr commented Feb 5, 2023

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

ferdnyc added a commit to ferdnyc/domoticz that referenced this issue Mar 14, 2023
It's a [reported issue][1] that Mermaid graphs containing
labeled links (lines with text on them) fail to render inside
a <details> section. If not collapsed, they render fine.

[1]: mermaid-js/mermaid#3504
@matthyx
Copy link

matthyx commented Aug 11, 2023

Same here, this is annoying...

bryceknz added a commit to FormidableLabs/babel-bridge that referenced this issue Sep 7, 2023
bryceknz added a commit to FormidableLabs/babel-bridge that referenced this issue Sep 21, 2023
@jgreywolf jgreywolf added roadmap items to add to roadmap for auto workflow and removed roadmap items to add to roadmap for auto workflow labels Nov 16, 2023
@aki-kesulahti
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Development

No branches or pull requests

5 participants