@mermaid-js/mermaid-cli でMermaidファイルをPDFにレンダリングする

TL;DR

npx -p @mermaid-js/mermaid-cli mmdc -e pdf -i example.mermaid

• @mermaid-js/mermaid-cli - npm

発端

最近 Mermaid による図版がよく使われるようになったなあと思います。
テキストベースのためGitで扱いやすい、LLM AIもMermaidが得意そうですし、また個人的には「箱を置いて線を繋いで……これはもうちょっと右……ああっ文字だけずれた」のようなレイアウトの手組みを行わなくて良いなど大変ありがたいのですが、逆に言えば何らかの方法でレンダリングしないと実際の図版として見ることは出来ません。

普段からコードを書いているような開発者については、例えば手元のVS Codeで以下のようなプラグイン:

• Mermaid Chart - Visual Studio Marketplace
• Mermaid Preview - Visual Studio Marketplace

のプレビュー機能を用いる、など各自いろいろやりようがあると思いますが、開発者以外の人に図版を見せたい、となった時に「ではまずVS Codeをインストールしてもらって……」というわけにもいかないので、何か別の形式でレンダリングされた図を書き出したい事があります。

プレビューの保存機能を使ってみる

前述のVS Codeプラグイン、たとえばMermaid ChartにはSVGまたはPNGで保存する機能があったので

試してみたのですが、

• SVG:
  • ChromeやSafariなどブラウザで開いて表示できるが、拡大/縮小出来ないなど不便
• PNG:
  • 拡大に限界があったり、高解像度に書き出す(ズームしてから書き出すと出来る)とファイルサイズも動作も重い

といまひとつ、またさらにこれは私のVS Codeがデフォルトの黒いテーマ設定だからではありますが、黒いテーマ設定に合わせたプレビュー結果がそのまま反映されたようで黒ベースの図版が出来上がり、これはあまり「一般的」ではないかな……もし白ベースにしたかったらVS Codeのテーマ変えないといけないのか？……手間だな……という結果になりました
(※実は設定出来るのかもしれませんが詳細未調査です)

Webサービスは？

ではVS Codeを使わない方法は？となるとMermaid公式のPlayGroundや、他にもMermaidをレンダリングするWebサービスはありそうですが、業務上の資料をむやみに外部Webサービスに貼り付けるわけにもいきません。導入には十分な調査、検討が必要です。

@mermaid-js/mermaid-cli

……ということでいろいろ調べている際に @mermaid-js/mermaid-cli を通りがかり「おーCLIあるのかー」と眺めてみたら

generates an SVG/PNG/PDF file

おおっPDF出せる！？

そして試したところ大変良かった、というお話でした。

• PDFを表示する環境は一般に充実している
• ベクターなので拡大も強い
• VS Codeと独立して白ベースで出力できた
• インストール方法はいろいろありますが、 npx でも使えて手軽だった

※実際に出力したPDFファイルも貼っておきます

• example.mermaid.pdf

おわり

以上、@mermaid-js/mermaid-cli の紹介でした。おすすめです 👍

---