Description
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