Mermaid を SVG に変換して文書とスライドに載せる方法
Mermaid のシーケンス図を SVG に出力する手順です。三つの参加者と四つのメッセージを持つ例で、編集から形式選択、ダウンロードまで試せます。実際の SVG と PNG を使い、掲載先で文字や矢印、画像の境界を確認します。
エディターで読みやすい図でも、スライドで拡大するとぼやけることがあります。Mermaid を SVG で出力すると、文書やプレゼンテーションに合わせて大きさを調整できるベクターファイルになります。Mermaid 画像変換ツールを開き、図のソースも一緒に保存します。
- ツールを開き、図をクリックしてソース編集に入ります。
- Mermaid コードを貼り付け、編集領域の外をクリックして描画結果を確認します。
- 設定を開き、出力で SVG を選びます。
- 設定を閉じ、画像をダウンロードを押します。SVG をブラウザーで開き、掲載先の文書やスライドでも試します。
エディターには Mermaid のソースを入力します。Markdown のコードブロックに保存している場合は、その内側だけを貼り付けます。
この例は、書き手、エディター、出力処理の間にある四つのメッセージを表します。矢印を確認しやすいように、ラベルは短くしています。ツールに貼り付けると同じ図を再現できます。
```mermaid
sequenceDiagram
participant Writer
participant Editor
participant Exporter
Writer->>Editor: Paste diagram source
Editor-->>Writer: Show preview
Writer->>Exporter: Choose SVG
Exporter-->>Writer: Download diagram
```
二つのファイルは同じソースから、ツールの出力操作でダウンロードしました。SVG では三つの参加者名、四つのメッセージ、図の下にあるブランド表記を確認します。やり取りを増やす際は Mermaid のシーケンス図構文ガイドを参照できます。
文書を仕上げる前に、実際に使うアプリでファイルを開きます。フォント、矢印の先端、ラベル、図の下端が正しく表示されるか確認します。拡大して細部を見た後、読者が見る大きさでも確認してください。
掲載先がラスター画像だけに対応する場合は、同じ出力設定で PNG を選んで書き出し直します。その画像も掲載予定の大きさで確認します。長い図はラベルを短くするか、複数の小さな図に分けると読みやすくなります。
Mermaid のテキストと画像を一緒に保存します。メッセージが変わったらソースを修正し、新しい SVG を出力します。やり取りの要点を短い説明として添えると、図の意図が伝わります。準備ができたら、SVG を作成してみてください。