Mermaidが使えない

[glyzinieh]

記事の中でmermaidを利用してチャート図をつくったのですが、プレビュー画面にも投稿した記事にも表示されません。

ブラウザのDeveloper ToolでConsoleを見てみると、以下のエラーが表示されていました。

[tanaka-asami415]

@glyzinieh
お問い合わせありがとうございます🙏

一度プライベートブラウザでも試してみていただけないでしょうか？
それでも同様の現象が出るようでしたら、以下環境を教えていただけると幸いです🙏

・OS（種類とバージョン ）
・ブラウザ（種類とバージョン ）と拡張機能

[glyzinieh]

@tanaka-asami415
プライベートブラウザでも同じ現象が発生しました。

OSは以下

エディション	Windows 11 Home
バージョン	21H2
インストール日	‎2022/‎04/‎29
OS ビルド	22000.675
エクスペリエンス	Windows 機能エクスペリエンス パック 1000.22000.675.0

ブラウザは以下の通りです。

拡張機能はすべて無効にしてあります。

また、Microsoft Edge・iPhoneのSafariでも同様の現象が確認できました。

[tanaka-asami415]

@glyzinieh
ありがとうございます！

頂いた画像を元に記事を作成してみたところ、我々の環境では起こらなかったため
原文のテキストをそのままいただけないでしょうか？🙏
スペースの全角・半角の違いや、不可視文字などで挙動が違うかもしれないため、試してみようと思います🙏

[glyzinieh]

@tanaka-asami415
ありがとうございます！

こちらでも試したところ、本文の中にmermaidという文字があるとダメなようです。
このような構成で、前述の現象が発生していたのですが、mermaidの部分を消すと正常に機能しました。

**（省略）**

### お問い合わせフォーム
説明

### 登録ページ
お問い合わせフォームと同様に、Googleフォームの自作UIを作成。
DBが複数に分かれているため、以下のような構成とした。
```mermaid
graph TD;
    GUI--POST-->サーバー;
    サーバー--POST-->Googleフォーム;
    サーバー--POST-->自宅鯖;
```

### プライバシーポリシー
説明

**（省略）**

### mermaid
説明

**（省略）**

[tanaka-asami415]

@glyzinieh
ありがとうございます！

こちらでも試したところ、本文の中にmermaidという文字があるとダメなようです。

ご指摘の通りこちらが原因となっているようです:eyes:

Mermaidの仕様上、Qiitaでmermaid という見出しがあると、
内部でMermaidのコードとバッティングしてしまい、上書きされてしまいます💦

申し訳ないのですが、mermaidという見出しを別のものにしていただけると幸いです🙏

Markdownチートシートへも、mermaidという見出しが使えないことを追記しておきます🙇

[glyzinieh]

@tanaka-asami415
了解しました。
対応ありがとうございます！