VSCodeでMermaidが正しく表示されない場合の解決方法

対象者

• VSCodeを使用
• Markdown Preview Mermaid Support(拡張機能)をインストールしている
• .mdファイル内にmermaidを使用してフローチャートやダイアグラムを表示しようとしている
• control + shift + vをしてプレビューを表示してもmermaidがテキストとして表示されてしまう

参考 Mermaid公式

私の場合

control + shift + vでプレビューを表示しても以下のようにテキストとして表示され、図として表示されない

• サンプル

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

• 表示例
  テキストのまま表示されてしまう🤔
  

解決方法

mermaidで記載している前後を```(バッククォート)で囲い、mermaidで書いていることを明示する

• サンプル

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

• 表示例
  プレビューで正しく図が表示された😊
  

この問題が起こった原因

生成AIの出力で、```(バッククォート)がうまく表示できなかったのであろう。
mermaidでフローチャートやダイアグラムを作成する際は気をつけたい。