VSCodeでMarkdownとMermaidを使うとプレビューで表示が乱れる問題の解消法

はじめに

VSCodeでMarkdownファイルの中でMermaidを利用する際、「Markdown Preview Enhanced」を使ってプレビュー表示をみてみると、以下のようにloopタグが黒く塗りつぶされたり、色が灰色で正しく表示されません。これを解消する方法を紹介します。

正常な表示

動作環境

Windows 10
VSCode

VSCode拡張プラグイン

Mermaidのテーマを設定する

VSCodeの拡張機能>「Markdown Preview Enhanced」の右下の歯車をクリックし、「Configure Extension Settings」を開いてください。

Settingsの下の方にある「Markdown-preview-enhanced: Mermaid Theme」のタブを適当なタブに変更してください。一度変更すると「default」も正しく表示されるようになります。

適当なmdファイルを作成し、右上の一番左にあるアイコンをクリックし、プレビューを開いてください。

# Markdown Preview Enhanced
 
 
```mermaid
sequenceDiagram
    A->>B: Hello A, how are you?
    loop hoge
        B-->>A: Yes!
    end

 
![](posts/vscode-markdown-mermaid/28925da62e220c61760ea7797a4b028e.webp)
 
loopのタグが正常に表示され、色も付くようになります。
 
###### default
 
![](posts/vscode-markdown-mermaid/93e63ce4945b6d9415c02bfc594b15f5.webp)
 
###### dark
 
![](posts/vscode-markdown-mermaid/df4e4a84189a81aee306f556155497b2.webp)
 
###### forest
 
![](posts/vscode-markdown-mermaid/de60a9cc6a9db2fb43be0ba528f02162.webp)
 
### 参考
 
*   [MPE(MarkdownPreviewEnhanced)でmermaidのグラフが真っ黒になる問題](https://qiita.com/tyKeP/items/63fd83466399d212d2e4)
 
[トップページへ戻る](/)