📌

VSCodeでのPDF化エラー:Mermaid図が表示されない原因と対策

2025/01/16に公開

執筆日

2024/1/16

やること

Vscodeでmarkdownで資料を書いていました。
その際に、Mermaidでシステムフロー図を書いていました。
Vscodeの拡張機能のMarkdown PDF でPDF化した際に、Mermaidで作成したシステムフロー図が表示されない。なぜ?

原因

調べると同じ人がいた。
Mermaid ServerのURL変えたらできそう。

https://github.com/yzane/vscode-markdown-pdf/issues/312#issuecomment-2315955054

手順

  1. Vscodeを開く
  2. 画面左上のファイル(F)>ユーザー設定>設定をクリックする

  3. Markdown-pdf:Mermaid Serverと検索し、https://unpkg.com/mermaid@10.4.0/dist/mermaid.jsに書き換える
  4. Vscodeの拡張機能のMarkdown PDF でPDF化する
  5. Mermaidでフロー図が出力されたことを確認する
ヘッドウォータース

Discussion