Mermaid図入りMarkdownをPDFにする方法｜フローチャートをきれいに収めるコツ

MermaidのフローチャートをMarkdownに書き、プレビューで確認してPDFへ出力する手順と、はみ出し・文字サイズへの対処を解説します。

Mermaidなら図もテキストで管理できます

Mermaidは、コードブロック内に図の構造を書いてフローチャートなどを生成する記法です。画像ファイルを別管理せず、Markdownと同じGit差分でレビューできるため、設計書や運用手順書に向いています。

PDF化には、MermaidコードをSVGへ描画できるMarkdownレンダラを使います。保存前に図が描画済みであることを確認し、SVGを含むHTMLを印刷またはPDFへ変換します。Mermaidに限らないPDF変換全体の手順は Markdownを印刷・PDFに変換する方法で解説しています。

コードフェンスの言語名をmermaidにします。

```mermaid
flowchart LR
  A[申請] --> B{承認?}
  B -- はい --> C[実行]
  B -- いいえ --> D[差し戻し]
```

入力後、「プレビュー」または「分割」で図が表示されることを確認します。通常のコードブロックのまま表示される場合は、mermaidの綴り、バッククォートの数、開始と終了のコードフェンスを確認してください。

長い説明を1つのノードへ詰め込むと、図が横に広がり、文字も小さくなります。ノードは「入力を検証」「承認を依頼」のように短くし、詳しい説明は図の下の本文へ移します。

flowchart LRは左から右、flowchart TDは上から下です。A4縦の資料では、横に分岐が多い図をTDへ変えると収まりやすい場合があります。A4横を使うならLRも見やすくなります。

1枚にすべての例外処理まで載せず、「全体フロー」と「エラー時の詳細フロー」に分けます。図ごとに##や###の見出しを付けると、目次からも探しやすくなります。

まずプレビューで図の幅を確認し、次の順で調整します。

図を小さくしすぎるとPDFで読めなくなります。縮小だけで解決せず、情報量そのものを整理するのが重要です。

図のタイトルが前ページ、図だけが次ページに分かれると読みづらくなります。プレビューで図の直前に改ページを置き、見出しと図を同じページから始めると整います。

図の下に長い説明が続く場合は、「図 → 要点の短い箇条書き → 詳細説明」の順にすると、ページが分かれても意味を追いやすくなります。

コードのまま表示される場合は、最初に開始フェンスが ```mermaid になっているか、終了フェンスが同じ数のバッククォートだけで閉じられているかを確認します。コードブロックの途中に余分なフェンスがあると、後続の本文までMermaidとして解釈されることがあります。

次に、ノードIDをA、Bのような短い半角英数字へ置き換え、ラベルだけを角括弧内に残します。括弧や記号を含む長いラベルは引用符で囲むと解決する場合があります。まず2ノードだけの最小構成で描画し、サブグラフ、スタイル、長い文言を1つずつ戻すと、原因の行を特定しやすくなります。

プレビューで読めても、A4へ縮小するとノード内の文字が小さくなることがあります。PDFを100%表示し、本文と同程度の距離からラベルを読めるか確認してください。淡い線や黄色だけで状態を表すと白黒印刷で判別しにくいため、枠線の太さ、実線・破線、ノード名も組み合わせます。

外部フォントに依存する図は、読み込みのタイミングや閲覧環境で文字幅が変わる場合があります。日本語を含む図では、保存したPDFを別のビューアでも開き、文字切れと位置ずれがないか確認すると安全です。

色だけで状態を区別せず、「成功」「エラー」などの文字も併記すると、印刷でもアクセシビリティの面でも伝わりやすくなります。

Mermaidの描画が終わる前にPDF保存を始めると、図が空白のまま出力されることがあります。すべての図が描画されたことをプレビューで確認してから保存してください。また、大きすぎる図は印刷できる範囲を超える場合があるため、ノードの文言を整理するか、プレビュー上で図の幅を調整します。

リンクが機能するかどうかは、Mermaidのセキュリティ設定やサニタイズ処理、PDFへの出力経路によって変わります。重要な情報への導線をノード内のリンクだけに頼らず、図の近くに通常のMarkdownリンクも併記しておくと安全です。

どの図をドキュメントに残すべきかの判断については、MarkdownとMermaidでドキュメントを書くメリットも参考にしてください。