Mermaid diagrams: document how to escape conflicting syntax

[damithc]

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?