mermaid.jsが記載されているMarkdownファイルをPDFで出力する

概要

marmaid.jsが記載されているMarkdownファイルをPDF出力する方法をご紹介したいと思います。

前提条件

今回の内容にはVisual Studio Code（以降VScode）の拡張機能「Markdown PDF」と「Markdown Preview Enhanced」が必須となります。

ファイルの作成と記載

任意の場所に「test.md」を作成しVScodeで開きましょう。開いたら下記の内容をtest.mdに記載してください。

# テスト

- これはテストです。

    ```mermaid
    graph LR
      A[起床] --> B[朝食]
      B --> C[作業]
      C --> D[昼食]
      D --> E[作業]
      E --> F[夕飯]
      F --> G[就寝]
      G --> A
    ```

Markdown Preview Enhancedのプレビューを表示した時に下記のように表示されていることを確認してください。

コードが記載記載されている部分を右クリックしてメニューを開き「Markdown PDF: Export (pdf)」をクリックしましょう。

test.mdを設置したフォルダにtest.pdfが作成されたと思います。それではtest.pdfを開いて見ましょう。

下記のようにMarkdown Preview Enhancedのプレビューで表示されていたものがそのままPDFファイルになっていることがわかります！

mermaid.jsの図形があるMarkdownファイルでもPDF化することができました。「Markdown Preview Enhanced」が入っていないとmermaid.jsのコードは図形としてではなく文字列として扱われてしまうので注意が必要です！