Mermaid図をPNG、SVG、Markdownに書き出す
図は、見てもらえる場所にあってこそ役に立ちます。mermaidは4つの出口を用意しています ― 画像、ベクター、ソース、そして自ら描画されるMarkdownブロック。どれが正解かは、図がどこへ向かうか次第です。これはその短縮版と、それぞれで何が壊れるかのまとめです。
先に形式を選ぶ
| 送り先 | 用途 | 理由 |
|---|---|---|
| GitHub、GitLab、Notion、Obsidian | Markdownブロック | ネイティブでレンダリングされ、差分も取れる ― 同期させるファイルが不要。 |
| スライド、仕様書、チャットメッセージ | PNG | どこにでも貼り付けられ、レンダラーも不要で、どこでも同じ見た目。 |
| Webサイト、印刷物 | SVG | ベクター ― どんなサイズでも鮮明で、テキストも選択可能なまま。 |
| 別のエディタ、リポジトリ | .mmdソース | 後から編集可能。画像は行き止まり。 |
送り先がmermaidをレンダリングできるなら、そもそも書き出す必要はありません。テキストとしてコミットされた図は1行ずつレビューできますが、PNGとしてコミットされた同じ図は置き換えることしかできません。
このエディタから書き出す
コードタブを開くと、書き出しボタンがツールバーにあります。それぞれ現在描画されているものに対して動作します。
- SVGをコピー ―
<svg>マークアップをクリップボードに置き、HTMLファイルやデザインツールにそのまま貼り付けられます。 - SVGをダウンロード ―
diagram.svgを保存します。 - PNGをダウンロード ―
diagram.pngを、白背景・2倍解像度で保存します。高精細スクリーンでも鮮明なまま、白いスライドの上で透明なにじみになることもありません。 - .mmdをダウンロード ― mermaidソースをプレーンテキストファイルとして保存します。
- .md(Notion)をダウンロード ― ソースをフェンス付き```mermaidブロックで包んで保存します。Notion、GitHub、Obsidianは貼り付け時にこれをレンダリングします。
スライド資料にはPNGを。文書の見出しやポスター、印刷物などリサイズされるものにはSVGを ― 書き出しサイズを超えて拡大されたPNGはすぐにぼやけます。
代わりにテキストのまま残す
フェンス付きブロックだけが、その場で編集可能なまま残る唯一の書き出し方法です。バッククォート3つ、mermaidという単語、図、バッククォート3つ。
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub ― READMEファイル、issue、プルリクエスト、コメントの中でレンダリングされます。
- GitLab ― Wiki、issue、マージリクエストの中でレンダリングされます。
- Notion ― コードブロックに貼り付けて、言語をMermaidに設定します。
- Obsidian ― プレビューと公開されたノートの中でレンダリングされます。
- Docusaurus / MkDocs Material / VitePress ― ビルドされたドキュメントの中でmermaidブロックがレンダリングされます。
うまくいかないこと
PNGがぼやける
PNGは解像度が固定です。決まったピクセルサイズで書き出され、それを超えて拡大すると補間されます。このエディタが2倍解像度で書き出しているのはそのためです。それでも足りない場合は、SVGを書き出して必要なサイズに変換するか、そのままSVGを使ってください。
SVGに背景がない
SVGの書き出しは仕様上透明なので、暗い色のノードテキストは暗いスライドの上で見えなくなります。SVGを明るいカード上に置くか、白背景で書き出されるPNGを使ってください。
フォントが環境によって違って見える
SVGはフォントを埋め込まずフォントファミリー名だけを参照するため、そのフォントがない環境では別のフォントに置き換わり、ラベルの枠がずれることがあります。閲覧者側のフォントを制御できない場合はPNGを使ってください。
図が途中で切れる
書き出しは現在描画されている内容をそのまま読み取るため、大きな図を書き出す前にビューを再センタリングしてください。ノードラベルが非常に長い場合は<br>で改行してください ― mermaidはラベルを自動で折り返しません。
2クリックで書き出す
エディタを開き、図を貼り付けるか描いて、SVG、PNG、ソースのいずれかを取得してください。アカウントの背後に隠れているものは何もありません。
よくある質問
mermaidをPNGに変換するには?
図を描画してから、PNGをダウンロードを使います。エディタは描画されたSVGをキャンバスに2倍スケールで白背景とともに描き、その結果を保存します ― サーバーとの通信は発生せず、図はブラウザの外に出ません。
透明なPNGを書き出せますか?
PNGボタンからはできません。あえて白で塗りつぶしているのは、透明な背景の上に暗い図のテキストがあると、PNGが貼り付けられるほとんどの場所で読めなくなるためです。代わりにSVGを書き出してください。こちらは透明です。
サイズの上限はありますか?
固定の上限はありません。書き出しはブラウザの中で行われるため、実質的な上限はブラウザが描画できる範囲です。それは図が人間にとって読める限界をはるかに超えています。
書き出した後も図を編集可能にしておくには?
ソースを残しておいてください。.mmdファイルかMarkdownブロックを画像と一緒にダウンロードします。PNGやSVGはmermaidに戻せませんが、ソースはそのままエディタに貼り付け直せます。