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
Loading
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?
Some Mermaid diagram syntax conflict with MarkBind syntax. For example, the following Git graph code.
%%{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 commitThe workaround is to escape the conflicting part using
{{ "..." }}, as follows.Suggestion: Perhaps this can be mentioned as a tip in the documentation, specifically when explaining how to use Mermaid diagrams?