Mermaidの図は、mermaid-cliを使ってSVGやPDFに書き出せます。
Mermaidはテキストから図を描画できるため、バージョン管理するドキュメントと相性のよいツールです。ただし、論文やスライド、ポスターに使う画像として保存するには、出力形式とサイズを指定する必要があります。PNGのピクセル数が足りないと、想定した大きさで印刷したときにぼやけて見えることがあります。
コマンドラインで出力する
公式ツールの
@mermaid-js/mermaid-cliには、mmdcコマンドが用意されています。npm install -g @mermaid-js/mermaid-cli
mmdc -i diagram.mmd -o diagram.svg # vector, preferred
mmdc -i diagram.mmd -o diagram.pdf # vector PDF
mmdc -i diagram.mmd -o diagram.png -s 3 # raster at 3x scale提出先や使用先が対応しているなら、SVGかPDFを選びましょう。 ベクター形式の線や文字は拡大しても鮮明に表示できますが、埋め込んだラスター画像の解像度は元のままです。PNGを使う場合は拡大倍率を指定し、出力後のピクセル数が印刷サイズと必要な解像度を満たしているか確認します。
| 形式 | ベクター対応 | 向いている用途 | 避けたい条件 |
|---|---|---|---|
| SVG | ベクター要素を格納可能 | Web掲載、出力後の編集 | 使用先がSVGに対応していない |
| ベクター要素を格納可能 | 論文、印刷、スライド | 取り込み先の編集ソフトで必要な要素を保持できない | |
| PNG | 非対応 | プレビュー、ラスター画像が必要な用途 | 最終的な表示・印刷サイズに対してピクセル数が足りない |
ほかの出力方法
VS Code。 Mermaidのプレビュー拡張機能を使うと、文書を書きながら図を表示できます。ただし、画像出力への対応は拡張機能によって異なります。SVG・PNG・PDFの出力方法を明確に指定したい場合は、上記のCLIを使えます。
Mermaid Live Editor。 ブラウザー上で図を作成する場合は、SVG出力と画像をレンダリングするリンクを利用できます。外部サービスで画像を生成する際は、図のテキストがそのサービスに送られることがあります。機密情報を含む図には、ローカルのCLIを使いましょう。
CIパイプライン。
mmdcはCLIなので、図の生成をビルド工程に組み込めます。よく使われる方法は、.mmdのソースをコミットし、ドキュメントのビルド時に画像を生成することです。ソースを更新するたびに描画し直せば、画像だけが古いまま残るのを防げます。- run: npm install -g @mermaid-js/mermaid-cli
- run: mmdc -i docs/architecture.mmd -o docs/architecture.svg
見た目を調整する
Mermaidの既定のスタイルはドキュメント向けです。論文などに使う場合は、次の3点を調整するとよいでしょう。
- テーマ。 図のYAMLフロントマターで、
configの下にtheme: neutralを設定します。印刷用のテーマを決める前に、実際に使うサイズでプレビューしてください。 - フォント。 設定の
fontFamilyでフォントを指定し、描画環境にそのフォントがインストールされていることを確認します。 - 向き。
graph LRとgraph TDでは図の縦横比が変わります。論文の段幅に収める際には、この違いが効いてきます。
---
config:
theme: neutral
fontFamily: Helvetica
---
graph LR
A[Sample collection] --> B[Extraction]
B --> C[Sequencing]
C --> D[Analysis]
Mermaid以外のツールが向いている場合
Mermaidはレイアウトを自動で計算するため、配置を細かく指定できる範囲には限りがあります。ドキュメントには便利ですが、配置そのものに意味がある科学図表では制約になります。
位置を厳密に揃えたい場合、投稿先の図の表現に合わせたい場合、解剖学的な位置や時間の順序などの関係を配置で示す場合には、別のツールを検討しましょう。Mermaidで図の骨組みを作り、SVGに出力してからベクター編集ソフトで仕上げる方法もあります。ただし、手作業で加えた仕上げの編集は、Mermaidのソースから再生成しても再現されません。
ヒント
.mmdのソースと出力画像は、一緒にコミットしましょう。ソースはレビューで変更点を追いやすく、内容が変わったときに図を再生成できます。画像は、完成した見た目を確認するために必要です。どちらか一方だけを残すと、変更の確認か閲覧の手軽さが損なわれます。Mermaidでは難しい配置が必要なら、SciFigのテキストから図を生成するツールやテキストから科学図表を作る機能で、自然言語の説明から下書きを作れます。図の構造を確認し、ラスター画像を編集可能なSVGにベクター化してから、ブラウザーのキャンバスで修正を仕上げます。全体の流れは研究内容を図にするためのガイドで紹介しています。
関連記事
関連する読み物: AIテキストから図で研究を即座に可視化, 2026年の最高の科学イラストレーションツール10選.
