mermaid: Unable to render rich display Diagram error not found.

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