Unable to render rich display Diagram error not found.

[HariSekhon]

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

• Mermaid version: whatever GitHub uses
• Browser and Version: Chrome

Additional Context

No response

[sidharthv96]

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]

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]

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

[zakariazuck]

Is this issue still alive ?

[dk-a-dev]

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

[asterbot]

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

[ArtemChekunov]

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

[jvfd3]

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]

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]

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]

+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]

+1 still not working

[tuck1s]

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]

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

[kaikai8812]

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]

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]

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]

thanks, bud

[redice44]

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

[gajakannan]

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]

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:

• The error from Mermaid
• The Mermaid version that Github is using

That's not really Mermaid's problem though.

[ringerc]

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]

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