はじめに

前回記事でMermaidについて触れて、WEBで動くエディタのお話も書いたのですが、実際Markdownで資料作成するとなるとMarkdownを書いているエディタでそのままMermaid記法書いて出力できた方が楽ちんですよね。
ということで、今回はVSCodeでMermaidを扱える環境を整えていこうと思います。

前提：PC環境など

Mac OS 13.0
Visual Studio Code 1.84.2

最終的にはMarkdownのコードブロックにMermaid記法で記載をすると、プレビューに図表が表示されPDFで書き出す際にも図として書き出すことができる、という状態を目指します。
VSCodeに何も設定していないと以下画像のように書いたものがそのままコードブロックのプレビューとして表示されます。

環境設定

Mermaidをプレビューする方法は2つあるのかなと思っています。
以下お好きな方を採用してみてください。

方法１：拡張機能 "Markdown Preview Mermaid Support" を導入する

VSCodeの拡張機能"Markdown Preview Mermaid Support"を導入します。
導入後はVSCodeのデフォルトのプレビュー機能でもMermaidの図をプレビューできるようになります。

設定からはテーマを選ぶことができ、
エディタがダークモード・ライトモードどちらであるかのそれぞれの場合に合わせて図のテーマを指定することができます。

さてこのままMarkdownをPDF出力できる！かと思うと、そうでもなくて、Markdown-PDFで書き出そうとするとおそらくMermaid記法で書いたテキストがそのまま出力されてしまうので、~~そちらは明日以降の記事とさせてください。。後日リンク貼ります。~~

こちらの記事を参照し、Markdown PDFの設定行なっていただければと思います。

方法2：拡張機能 "Markdown Preview Enhanced" を導入する

こちらの記事で、Markdownをみたままプレビューできるからいいぞ！と言っていた拡張機能ですが、こちら、Mermaidをプレビューすることができます。

またこちらも設定からテーマを変えると、図のカラーテーマがちょっと変わります。
先ほどより若干選択肢少なめです。
資料に合わせて選んでみても良いかも？

PDF出力もこちらはMarkdown Preview Enhancedの書き出し機能を使えば見たままのPDFを書き出すことができます。
プレビュー画面を右クリック>Export>Chrome(Puppeteer)>PDFと選択していくとPDF出力ができます。

おわりに

拡張機能入れるだけで簡単に使えるようになるのでありがたいです！
Markdown Preview Enhancedを他の目的で使用されるのであれば、そちらの機能でMermaidもプレビューするのがいいのかな、そうでないなら方法１がいいのかな、と思っております。
土日に記事書き溜めしようと思っていたのですが、12月は家庭の用事が多くむしろ土日の方が忙しくて全然時間が取れないことに気づきました。。。日々コツコツ頑張ります。