原稿 · .md
.md ファイルや画像をドロップできます
Markdown を貼り付けるか、.md ファイルをドロップするか、ファイルを開いてください
校正刷り
A4 · 改ページはダウンロードした PDF に準じます
ライブ
```mermaid ブロックを含む Markdown を貼り付ければ、図が鮮明なベクターのままの PDF をダウンロードできます。
Markdown を貼り付けるか、.md ファイルをドロップするか、ファイルを開いてください
Mermaid を使えば、数行のテキストからフローチャート、シーケンス図、ガントチャートなどを描けます。ところが、その図を PDF に出力しようとするとうまくいかないことがよくあります。Mermaid に対応しておらずソースコードをそのまま出力するオンライン変換ツールは多く、ページ全体を 1 枚の画像にしてしまうものもあります。エディタからの書き出しでは、横に広い図が見切れたり、仕上がりがパソコンにインストールされたフォントに左右されたりします。
ここでは、```mermaid ブロックはブラウザ内で SVG に描画され、ネイティブのベクター図形として PDF に埋め込まれます。どの倍率でも図は鮮明なまま、ラベルは選択・コピー・検索ができ、classDef や style で指定した色も書いたとおりに反映されます。
図はピクセルではなくベクターのパスとテキストとして埋め込まれるので、どんなサイズで印刷しても鮮明で、ファイルサイズも小さく抑えられます。PDF リーダーの検索で図の中の語句も見つかり、フローチャートのラベルをそのままコピーすることもできます。
図は収まる場合は本来の大きさのまま配置され、横に広い図は余白をはみ出して見切れるのではなく、本文の幅まで縮小されます。1 ページより縦に長い図は、1 ページに収まるよう縮小されます。ラベルは HTML の埋め込み（foreignObject）ではなく SVG のテキストとして描かれます。ほかの書き出し方法でラベルがあるはずの場所が空白になるのは、多くの場合この HTML の埋め込みが原因です。
フローチャート、シーケンス図、クラス図、状態遷移図、ER 図、ガントチャート、円グラフ、マインドマップ、タイムラインなど、Mermaid が対応する図は Mermaid 自身が描画します。書き方は GitHub、GitLab、Obsidian、Notion で使っているものとまったく同じです。
拡張機能や設定によっては、Mermaid の描画に対応していなかったり、描画が終わる前に PDF 化されたりして、図が出力されずコードのまま残ることがあります。ここでは Markdown をエディタに貼り付けるか .md ファイルをドロップするだけで、mermaid と指定されたコードブロックがすべて図として描画されます。拡張機能のインストールも設定も要りません。
使っている変換ツールが Mermaid を描画せず、ただのコードとして扱っているためです。ここでは mermaid と指定したコードブロックは図として描画されます。構文が正しくない場合は、プレビューと PDF に Mermaid のエラーメッセージ、行番号、問題の行を示す枠が表示され、文書のほかの部分は通常どおり描画されます。
図はビットマップではなくベクター図形なので、拡大してもぼやけません。横に広い図はページからはみ出さないよう本文の幅に、縦に長い図は 1 ページに収まるよう縮小されます。そのぶん文字が小さくなるので、とても横長の図は向きを TD にしたり、いくつかに分けたりすると読みやすくなります。
できます。ラベルは本物のテキストとして埋め込まれるので、選択・コピーでき、PDF リーダーの検索でも見つかります。
反映されます。classDef、class、style で指定した塗り、線の色、線幅は PDF でもそのまま保たれます。
いいえ。Mermaid も PDF エンジンもブラウザ内で動きます。このページは文書をどこにも送信できないようになっています。図だけを PDF にしたい場合は、```mermaid ブロックだけをエディタに置いてダウンロードしてください。ほかで使うなら、プレビューの図にマウスを重ねると SVG のコピーや、SVG・PNG でのダウンロードができます。
表・コード・数式を保ったまま ChatGPT の回答を PDF 化
Claude の回答やアーティファクトを Mermaid 図ごと PDF に
Google Gemini の回答を組版された PDF で保存
日本語用フォントで組版し、□ や中国語の字形を避ける