【備忘録】VSCodeでmarpのPDF出力時にmermaidの図を正しく表示させる

タイトル書くだけでも頭ひねってどうしようとか考えてしまうぐらいアウトプットしてないなと…
たくさん他に有意義な記事を書かれているエンジニアの皆様に申し訳ない気持ちになりつつも、個人的になかなか他で設定情報が見つからなかったので、備忘の兼ねて投稿します。

結論から

1. setting.jsonに以下を追記

"markdown.marp.enableHtml": true

setting.jsonの開き方

VSCode上でCtrl + Shift + pでコマンドパレットを開き、setting.jsonと打ち込み

この中のどれでもいいのですが、ワークスペース設定かユーザー設定のどちらかに追記するのがいいかなと思います。

2. Markdownファイルに以下JavaScriptの記載を追加

事前にVSCodeのプレビューでmarpによるmermaidの図自体は表示されていることが前提です。
こちらの記事等を参考に、mermaidが正しくプレビューされるようにしておきます。
https://qiita.com/sato_kana/items/2a13f19017576488f017

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

記載箇所はどこでもいいのですがが、実際は分かりやすいように最初のスライド箇所にでも記載するといいと思います。

---
marp: true
paginate: true
theme: default
---
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

# ここからスライド作成開始

こんな感じで書き出す感じで

どんな出来栄えのPDFになるの？

社内向けにgit研修を作っている資料でmermaidを利用してGitGraphでブランチの説明を図にしたときの1スライドから

• もともとVSCode上でのレビュー画面
  

• JavaScriptの記載が無いとき
  

• JavaScriptの記載を入れたとき
  

  色味の差はあるけれど正しくmermaidの図が表示されています。

3. まとめ

この方法の何がいいかというと、marp、mermaidによるスライド作成がVSCodeのみで完結します。PDF出力だけではなくpptx出力でもいけました。
というか私がmarp使い始めたばかりなので慣れていないこともあり、状況によってはmarp-cli使わないとダメとかあると急に敷居が高くなるので…

シンプルにVSCode+marp+mermaidおすすめです！