目的
- VisualStudioCodeにてmermaidをコーディングしてMarkdown Preview Enhancedでプレビューすると図の色がうまく出ず、出力しても色がうまく出ないときの解決方法をまとめる。
本記事はtykeさんのMPE(MarkdownPreviewEnhanced)でmermaidのグラフが真っ黒になる問題の情報をもとに作成しています。
tykeさん記事にしていただき本当にありがとうございます。お礼申し上げます。
この記事のターゲット
- mermaidで図を作ったが、Markdown Preview Enhancedでのプレビューで色がおかしく(下記画像)なってしまった方
解決方法
- Markdown Preview Enhancedはインストールしてそのままだと一部の図の色合いがおかしくなる。
- プラグインの設定を修正してあげると正常に表示できる。
プラグインバーを開く(赤矢印部分をクリック)
Markdown Preview Enhancedの欄を探し、歯車マークをクリック
「拡張機能の設定を構成します。」をクリック
Markdown Preview Enhancedの設定が表示されたらスクロールして「Markdown-preview-enhanced:Mermaid Theme」の設定を見つける
プルダウンメニューからdefault以外をお好みで選択する。
mermaidのコードを再度プレビューして正常に表示されていることを確認する。
まとめ
- Markdown Preview Enhancedでmermaidを正常に表示させることができた。