MDPress

Mermaid PDF出力

MermaidダイアグラムをMarkdownごとPDFに変換する

フローチャートやシーケンス図、ガントチャートをmermaidのコードフェンスに書くと、MDPressがそのまま描画します。図はライブプレビューに表示され、PDFにはベクター画像として収まるため、どれだけ拡大しても線がにじみません。インストールもコマンド操作も不要で、1日4回まではアカウントなしで利用できます。

変換ツールを開く

mermaidのフェンスからPDFまで3ステップ

  1. 01

    Markdownを貼り付ける

    文書をエディターに貼り付けるか、.mdファイルをアップロードしてください。各図はGitHubと同じように、バックティック3つとmermaidという語で始まるコードブロックの中に書きます。

  2. 02

    プレビューで図を確認する

    プレビューは入力するたびに図を描き直します。構文に誤りがあると、その部分は図ではなく通常のコードとして表示されるので、書き出す前に該当行を見つけて直せます。

  3. 03

    スタイルを選んでダウンロード

    クリーン、エディトリアル、テクニカルから選び、続いてA4、A5、US Letterを選びます。PDFボタンを押すと、図が埋め込まれ、周囲の文章も選択できる状態のファイルがダウンロードされます。

Mermaidのフローチャートを含むMarkdownファイル

この短い工程メモには、通常のMarkdownの間に1つのフローチャートが入っています。

# リリースプロセス

すべての変更は、レビューから本番までの同じ経路をたどります。

```mermaid
flowchart LR
  A[プルリクエスト作成] --> B[コードレビュー]
  B --> C[テスト実行]
  C --> D[ステージング配置]
  D --> E[リリース]
```

## 補足

- レビューには1件の承認が必要です。
- テストはすべてのプッシュで実行されます。
- ステージングは本番と同じ設定を使います。

リリースプロセス

すべての変更は、レビューから本番までの同じ経路をたどります。

flowchart LR
  A[プルリクエスト作成] --> B[コードレビュー]
  B --> C[テスト実行]
  C --> D[ステージング配置]
  D --> E[リリース]

補足

  • レビューには1件の承認が必要です。
  • テストはすべてのプッシュで実行されます。
  • ステージングは本番と同じ設定を使います。

ここでMermaid図を変換する理由

スクリーンショットではなくベクター

各図はビットマップではなくベクター画像としてPDFに収められます。密度の高いフローチャートを拡大しても、印刷しても、線とラベルはくっきりしたままです。

図と文書が一体になる

多くのMermaidツールは画像を1枚書き出すだけです。ここでは図が見出しや表、ハイライト付きコードと同じ文書の中に収まるので、仕様書や設計メモを1つのファイルとして届けられます。

図をページ内にまとめて配置

図はページ幅に収まるよう縮小され、2ページに分かれないように配置されます。それでも収まりが悪いときは、図の直前に\newpageの行を置いて新しいページから始めてください。

きれいな図を作るコツ

  • ノードのラベルは短く簡潔にしてください。長いラベルは図を横に広げ、幅に収めるために縮小されると文字も小さくなります。
  • 大きな図はA5よりA4やUS Letterのほうが読みやすくなります。手順が長く連なる場合は、ページの高さを使える縦方向のフローチャートを試してください。
  • フェンスがプレビューでコードのまま表示される場合、Mermaidの構文に誤りがあります。PDFでも同じコードブロックが表示されるため、ダウンロード前に修正してください。

Mermaid PDF出力に関する質問

MermaidダイアグラムをPDFに変換する方法は？
図をmermaidと記したコードフェンスに入れ、MDPressに貼り付けてPDFボタンを押します。図だけの文書でも、長いMarkdownファイルの一部でも、同じ方法で処理されます。
対応しているMermaidの図の種類は？
MDPressはブラウザ上で標準のMermaidライブラリを実行するため、フローチャート、シーケンス図、クラス図、状態遷移図、ガントチャートなど標準の図がすべて描画されます。プレビューに表示されれば、そのままPDFにも収まります。
無料で使えますか。図は保存されますか。
アカウントなしなら24時間ごとに4回、無料アカウントなら5回まで利用できます。テキストはPDF作成のために一度サーバーへ送られますが、保存はされません。下書き自体はブラウザ内に留まります。

MermaidのMarkdownをPDFに変換する

mermaidのフェンスを含む文書を貼り付けて、図がプレビューに現れる様子を確認してください。

変換ツールを開く