Repository navigation
Mermaid diagrams: document how to escape conflicting syntax #2550
Description
Some Mermaid diagram syntax conflict with MarkBind syntax. For example, the following Git graph code.
<mermaid>
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%%
gitGraph
commit id: "feat(api): ..."
commit id: "a"
commit id: "b"
commit id: "fix(client): .extra long label.."
branch c2
commit id: "feat(modules): ..."
commit id: "test(client): ..."
checkout main
commit id: "fix(api): ..."
commit id: "ci: ..."
branch b1
commit
branch b2
commit
</mermaid>
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%%
gitGraph
commit id: "feat(api): ..."
commit id: "a"
commit id: "b"
commit id: "fix(client): .extra long label.."
branch c2
commit id: "feat(modules): ..."
commit id: "test(client): ..."
checkout main
commit id: "fix(api): ..."
commit id: "ci: ..."
branch b1
commit
branch b2
commit
The workaround is to escape the conflicting part using {{ "..." }}, as follows.
<mermaid>
{{ "%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%%" }}
gitGraph
commit id: "feat(api): ..."
commit id: "a"
..
</mermaid>
Suggestion: Perhaps this can be mentioned as a tip in the documentation, specifically when explaining how to use Mermaid diagrams?
Activity
nightcityblade commentedon Jul 30, 2026
Hi, I'd like to work on this. I'll submit a PR shortly.
Incogdino commentedon Aug 3, 2026
@all-contributors please add @nightcityblade for docs
allcontributors commentedon Aug 3, 2026
@Incogdino
I've put up a pull request to add @nightcityblade! 🎉