Markdown 上で作成した Mermaid による図を PDF として保存した時に、正しく図として表示されない時の対処方法のメモを残します。
確認時のバージョン情報
- VSCode: 1.104.2
- Markdown PDF (
yzane.markdown-pdf): 1.5.0
対処手順
- 試しに HTML で出力してみる
- "Markdown PDF: Export (html)" を実行して HTML 上で Mermaid による図が正しく表示されるかを確認します。
- HTML で正しく表示できた時は VSCode の設定を変更する
- 設定 "Markdown-pdf: ExecutablePath" (
markdown-pdf.executablePath) に Google Chrome の実行ファイルを指定します。
- 設定 "Markdown-pdf: ExecutablePath" (
- HTML でも正しく表示できない時は Mermaid の参照を変更してみる
- VSCode の設定 "Markdown-pdf: Mermaid Server" (
markdown-pdf.mermaidServer) に別の Mermaid JS ファイルを指定して動作を確認してみます。
- VSCode の設定 "Markdown-pdf: Mermaid Server" (
補足説明
試しに HTML で出力してみる
まず最初に Markdown を PDF ではなく HTML として出力してみて結果を確認してみます。
場合によっては HTML で出力した時は Mermaid による図が正しく表示されることがあります。
どうやら "Markdown PDF" では Markdown を一度 HTML に変換してから PDF に変換しているようです。
Mermaid の図が HTML で正しく表示されるのであれば「Markdown->HTML」は問題なく「HTML->PDF」に問題あり、HTMLでも正しく表示されないのであれば「Markdown->HTML」の時点で問題があることになります。
HTML で正しく表示できた時は VSCode の設定を変更する
HTML で Mermaid による図が正しく表示されたのならば、VSCode の設定を開いて "Markdown-pdf: ExecutablePath" (markdown-pdf.executablePath) に Google Chrome（または Chromium 製 Web ブラウザ）の実行ファイルを指定します。
推測を挟みますが、「HTML->PDF」変換を行う時に既定で使用される Chromium が Mermaid に対応しておらず PDF で図が正しく表示されないようです。
そのため Mermaid を正しく表示できる Web ブラウザを代わりに使用することで、「HTML->PDF」変換が正しく働くようになるようです。
（私の環境ではこの方法で解決しました）
HTML でも正しく表示できない時は Mermaid の参照を変更してみる
HTML でも Mermaid による図が正しく表示されない時は、VSCode の設定を開いて "Markdown-pdf: Mermaid Server" (markdown-pdf.mermaidServer) に明示的なバージョンを指定することで解決することがあるようです。
この辺りはあまり試せていないため、詳しくは以下を参照してください。
または、オフライン環境で動作しないのであればローカルに保存した Mermaid JS ファイルを指定することで解決するかもしれません…。