VS Code拡張機能「Markdown PDF」のPDF生成でmermaid図が展開されない問題の解決方法

Diary
VS Code拡張機能「Markdown PDF」のPDF生成でmermaid図が展開されない問題の解決方法
Page content

たとえば仕様書を書くとき

graph TD
	A[Client] --> B[Load Balancer]
	B --> C[Server01]
	B --> D[Server02]

上記のような、mermaid記法で描く図を含むmarkdownテキストをVS Code上で作成し、VS Codeの拡張機能「Markdown PDF」を使ってそのmarkdownテキストをPDFファイルへ変換したとき。mermaid記法の部分が図として解釈・展開されておらず、記法そのままのコード、つまり文字としてPDFファイルに反映されちゃう現象に遭遇した。

VS Codeの標準「Markdownプレビュー」ではmermaid記法部分がちゃんと図として表示されているのになぜ？と調べてみたところ、おそらくの原因と、その解決方法が分かったのでメモ。

おそらくの原因

VS Codeの設定の Markdown PDF > Mermaid Server で指定されているデフォルトのURL (公式ドキュメント) が、2023-03-30時点ではNot Foundになっているため。

解決方法

VS Codeの設定にある Markdown PDF > Mermaid Server の値を、たとえば下記の変更後のURLに変更する。こうするとMarkdown PDFがmermaid.min.jsを読み込み、PDFファイルにもmermaid記法の部分が図として展開される。

Markdown PDF > Mermaid Server
変更前 (デフォルト)https://unpkg.com/mermaid/dist/mermaid.min.js
変更後https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js

参考リンク

今回の問題を多少の時間をかけて自力で解決した後、次のIssue情報を発見した……。orz