search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
72.31k stars 6.59k forks source link

Unable to render rich display Diagram error not found. #4388

Open HariSekhon opened 1 year ago

HariSekhon commented 1 year ago

Description

When editing MermaidJS in GitHub markdown I am finding Mermaid is often failing without giving an error message, making it difficult to find where the problem is.

This seems like something that needs to be fixed / improved otherwise debugging graphs is difficult.

Steps to reproduce

From my repo: https://github.com/HariSekhon/Diagrams-as-Code

Here is what I created:

%%{ init: {
        'logLevel': 'debug',
        'theme': 'dark',
        'mainBranchName': 'main',
        'themeVariables': {
            'git0': 'red',
            'git1': 'blue ',
            'git2': 'green',
            'gitInv0': '#FFFFFF',
            'gitBranchLabel0': '#FFFFFF',
            'commitLabelColor': '#FFFFFF'
        }
    }
}%%

gitGraph
    branch staging
    branch production

    checkout main
    commit id: "commit 1"

    checkout staging
    commit id: "commit 1 "

    checkout production
    commit id: "commit 1  "

    checkout main
    commit id: "commit 2"

    checkout staging
    commit id: "commit 2 "

    checkout production
    commit id: "commit 2  "

    checkout main
    commit id: "commit 3"

    checkout staging
    merge main id: "fast-forward merge" tag: "CI/CD + QA Tests"

    checkout production
    merge staging id: "fast-forward merge " tag: "Production Release (CI/CD)"

    checkout main
    commit id: "commit 4"

    checkout staging
    commit id: "commit 4 "

    checkout production
    commit id: "commit 4  "

    checkout main
    commit id: "commit 5"

    checkout staging
    commit id: "commit 5 "

    checkout production
    commit id: "commit 5  "

    checkout main
    commit id: "commit 6"

    checkout staging
    merge main id: "fast-forward merge 2" tag: "CI/CD + QA Tests"

    checkout production
    merge staging id: "fast-forward merge 2 " tag: "Production Releease (CI/CD)"

    checkout main
    commit id: "commit 7"

    checkout staging
    commit id: "commit 7 "

    checkout production
    commit id: "commit 7  "

    checkout main
    commit id: "commit 8"

    checkout staging
    commit id: "commit 8 "

    checkout production
    commit id: "commit 8  "

    checkout main
    commit id: "commit 9"

    checkout staging
    merge main id: "fast-forward merge 3" tag: "CI/CD + QA Tests"

    checkout production
    merge staging id: "fast-forward merge 3 " tag: "Production Release (CI/CD)"

and when I change the init mainBranchName field to dev and update all branch references from main to dev, I get a very generic error with no line number, leaving me to scour every character in 100 lines of code:

Unable to render rich display

Diagram error not found.
%%{ init: {
        'logLevel': 'debug',
        'theme': 'dark',
        'mainBranchName': 'dev',
        'themeVariables': {
            'git0': 'red',
            'git1': 'blue ',
            'git2': 'green',
            'gitInv0': '#FFFFFF',
            'gitBranchLabel0': '#FFFFFF',
            'commitLabelColor': '#FFFFFF'
        }
    }
}%%

gitGraph
    branch staging
    branch production

    checkout dev
    commit id: "commit 1"

    checkout staging
    commit id: "commit 1 "

    checkout production
    commit id: "commit 1  "

    checkout dev
    commit id: "commit 2"

    checkout staging
    commit id: "commit 2 "

    checkout production
    commit id: "commit 2  "

    checkout dev
    commit id: "commit 3"

    checkout staging
    merge dev id: "fast-forward merge" tag: "CI/CD + QA Tests"

    checkout production
    merge staging id: "fast-forward merge " tag: "Production Release (CI/CD)"

    checkout dev
    commit id: "commit 4"

    checkout staging
    commit id: "commit 4 "

    checkout production
    commit id: "commit 4  "

    checkout dev
    commit id: "commit 5"

    checkout staging
    commit id: "commit 5 "

    checkout production
    commit id: "commit 5  "

    checkout dev
    commit id: "commit 6"

    checkout staging
    merge dev id: "fast-forward merge 2" tag: "CI/CD + QA Tests"

    checkout production
    merge staging id: "fast-forward merge 2 " tag: "Production Releease (CI/CD)"

    checkout dev
    commit id: "commit 7"

    checkout staging
    commit id: "commit 7 "

    checkout production
    commit id: "commit 7  "

    checkout dev
    commit id: "commit 8"

    checkout staging
    commit id: "commit 8 "

    checkout production
    commit id: "commit 8  "

    checkout dev
    commit id: "commit 9"

    checkout staging
    merge dev id: "fast-forward merge 3" tag: "CI/CD + QA Tests"

    checkout production
    merge staging id: "fast-forward merge 3 " tag: "Production Release (CI/CD)"

The diff between the two graph codes seems pretty clean on diff:

4c4
<         'mainBranchName': 'main',
---
>         'mainBranchName': 'dev',
20c20
<     checkout main
---
>     checkout dev
29c29
<     checkout main
---
>     checkout dev
38c38
<     checkout main
---
>     checkout dev
42c42
<     merge main id: "fast-forward merge" tag: "CI/CD + QA Tests"
---
>     merge dev id: "fast-forward merge" tag: "CI/CD + QA Tests"
48c48
<     checkout main
---
>     checkout dev
57c57
<     checkout main
---
>     checkout dev
66c66
<     checkout main
---
>     checkout dev
70c70
<     merge main id: "fast-forward merge 2" tag: "CI/CD + QA Tests"
---
>     merge dev id: "fast-forward merge 2" tag: "CI/CD + QA Tests"
76c76
<     checkout main
---
>     checkout dev
85c85
<     checkout main
---
>     checkout dev
94c94
<     checkout main
---
>     checkout dev
98c98
<     merge main id: "fast-forward merge 3" tag: "CI/CD + QA Tests"
---
>     merge dev id: "fast-forward merge 3" tag: "CI/CD + QA Tests"

so I can't see why this doesn't work.

Is MermaidJS sensitive to whitespace?

I've even eliminated whitespace difference that I could see with cat -e on Mac and verified this via:

$ diff code1.txt code2.txt > /tmp/diff.txt
$ diff -w code1.txt code2.txt > /tmp/diff-ignoring-whitespace.txt
$ diff /tmp/diff.txt /tmp/diff-ignoring-whitespace.txt
<no output>

Ultimately I think MermaidJS error messages need to be improved to give accurate feedback of why the code doesn't work.

In the Live Editor I get this error:

Error: Trying to checkout branch which is not yet created. (Help try using "branch dev")

Eventually I've found the problem being that mainBranchName was being ignored because it wasn't wrapped in 'gitGraph': {}.

This was harder to find than it should have been, and also any tiny mistake such as missing a comma after 'gitGraph': {} becomes difficult to find without an error message and line number, in this case you're squinting at 100 lines looking for any character out place...

Screenshots

See above

Code Sample

See above

Setup

Additional Context

No response

sidharthv96 commented 1 year ago

Diagram error not found. this error has been fixed in our newer releases (Github is few release behind). But I do agree that the error messages could be more helpful.

HariSekhon commented 1 year ago

Good to know, thanks!

I'll leave this open for people to find until the fix is live on GitHub, at which time the above should show a more specific error message.

Sanchit33 commented 1 year ago

@HariSekhon Clear the browser cache and then run it again, it worked for me.

zakariazuck commented 1 year ago

Is this issue still alive ?

dk-a-dev commented 1 year ago

yes i encountered this issue in my repo, is it still not fixed

asterbot commented 1 year ago

Same, I am facing the same issue in my repo. I even tried clearing my cache, seems to still not work.

ArtemChekunov commented 1 year ago

I getting the same error by using zenuml in github README.md

jvfd3 commented 1 year ago

What was happening to me is that I was using markdown syntax without the quotes:

Minimum Example:

With quotes

flowchart TD A["💠"]

flowchart TD
  A["💠"]

Without quotes

flowchart TD A[💠]

flowchart TD
  A[💠]
lindenquan commented 1 year ago

For me GitHub markdown uses old mermaid version probably v9 that's why v10 mermaid doesn't give me any error, but i see the Unable to render error in Github markdown pages

dsaf commented 1 year ago

I have the same issue. In my case it's important that it works well every time. I try to like diagrams-as-code but it looks like good ol' static SVG will be better forever.

tuck1s commented 11 months ago

+1 from me. It's annoying that VS Code extension previews work perfectly on content, then you push to Github and see the red error box.

hgodinho commented 10 months ago

+1 still not working image

tuck1s commented 10 months ago

I was able to work-around my issue by writing different Mermaid syntax, e.g.

graph LR

instead of

flowchart LR

And wrapping names that include a newline in " quotes.

I believe this is due to Github rendering with an earlier version of Mermaid (version 9 instead of the latest?) and so it's not the Mermaid project we need to complain to.. perhaps here?

https://github.com/orgs/community/discussions/70672

See also:

https://github.com/github/docs/blob/02309ab97a85d21018f872fd3c72de199a2633c7/content/repositories/working-with-files/using-files/working-with-non-code-files.md#displaying-mermaid-files-on--data-variablesproductprodname_dotcom-

greg7mdp commented 10 months ago

I was able to work around the issue by adding some quotes. around text block and removing embedded markdown.

kaikai8812 commented 10 months ago

I was able to work around the issue by adding some quotes. around text block and removing embedded markdown.

I was encountering the same phenomenon, but by taking the above measures, I was able to solve the problem! Thank you very much!

dk-a-dev commented 10 months ago

I was able to work around the issue by adding some quotes. around text block and removing embedded markdown.

@greg7mdp can u share an example or share the repo, because I am still facing the issue

greg7mdp commented 10 months ago

I was able to work around the issue by adding some quotes. around text block and removing embedded markdown.

@greg7mdp can u share an example or share the repo, because I am still facing the issue

Sure this commit fixed my issue and the mermaid displayed in github after that.

dk-a-dev commented 10 months ago

thanks, bud

redice44 commented 9 months ago

It also doesn't like any dashes - or underscores _ in ids.

gajakannan commented 9 months ago

As of this writing I am facing this issue with an ER Diagram. It works fine with live editor. I created a very simple mmd file called test.mmd to display mermaid version and throws the error. From what I understand it should show the mermaid version github is using to render but it just errors out.

info
ringerc commented 8 months ago

The error from GitHub is incredibly unhelpful. Especially when the diagram works fine in https://mermaid.live so there's no indication of why GitHub is choking on it.

It would help if it included:

That's not really Mermaid's problem though.

ringerc commented 8 months ago

Mermaid js does not like the string self appearing in a label for a node:

flowchart TD;

  my_self["me"]
  other["thing"]
  my_self --> other

vs

flowchart TD;

  my_thing["me"]
  other["thing"]
  my_thing --> other

This took ages to figure out by basically bisecting my diagram then changing things until the error went away.

Raised as https://github.com/mermaid-js/mermaid/issues/5317

zongqichen commented 6 months ago

The issue is still open? Does github support mermaid keyword style? When I add style to it, it shows the same error.