Mermaid 図を埋め込む方法
プレーンテキストから Mermaid を描画してくれるツールもあれば、エクスポートした画像が必要なツールもあります。ここでは、ネイティブにレンダリングされる場所、各プラットフォームでの埋め込み方法、そしてツールが対応していない場合のフォールバックを紹介します。
- 01
図を作成する
エディタを開き、Mermaid を記述または貼り付けて、思いどおりにレンダリングされることを確認します。
- 02
ソースをコピーするか画像をエクスポートする
Mermaid をネイティブにレンダリングするプラットフォームでは、フェンス付きの ```mermaid Markdown ブロックをコピーします。それ以外の場所では、SVG または PNG をエクスポートします。
- 03
適切な場所に貼り付ける
Mermaid ブロックをネイティブ対応のプラットフォームに貼り付けるか、エクスポートした画像をドキュメント、スライド、メールに配置します。編集可能な状態を保つため、ソースはリポジトリに残しておきましょう。
Mermaid がレンダリングされる場所 — プラットフォームごとに
| プラットフォーム | Mermaid 対応 | 埋め込み方法 |
|---|---|---|
| GitHub | ネイティブ | 任意の README、Markdown ファイル、issue、pull request、discussion、wiki にフェンス付きの ```mermaid ブロックを貼り付けます。GitHub が自動的に描画します。 |
| GitLab | ネイティブ | 同じフェンス付きの ```mermaid ブロックが、GitLab.com およびセルフマネージドインスタンスの Markdown、issue、merge request で機能します。 |
| Obsidian | ネイティブ | 任意のノートに ```mermaid コードブロックを記述すると、Obsidian が閲覧モードとライブプレビューモードでレンダリングします — プラグインは不要です。 |
| Notion | ネイティブ(コードブロック) | /code ブロックを挿入し、言語を「Mermaid」に設定してソースを貼り付け、ブロックの Preview / Split ビューで図を表示します。 |
| Confluence | アプリが必要 | Confluence には Mermaid の組み込み対応はありません。Marketplace アプリ(例:Mermaid マクロ)をインストールしてソースを貼り付けるか、エクスポートした SVG/PNG を埋め込みます。 |
| 自分のウェブサイト | ネイティブ(スクリプトを追加) | ソースを class "mermaid" の "pre" タグに配置し、CDN から mermaid.js を読み込みます — 下記のスニペットを参照してください。または、JavaScript を一切使わずにエクスポートした SVG を埋め込みます。 |
| Slack、Google Docs、メール、PDF | 画像をエクスポート | これらは Mermaid をレンダリングしません。エディタから SVG(どのサイズでも鮮明)または PNG をエクスポートし、その画像を貼り付けます。 |
プラットフォームの機能は変わります — 特に Notion のプレビューや Confluence のアプリについては、ご自身のアカウントで確認してください。「ネイティブ」とは、画像をアップロードせずにソースから図がレンダリングされることを意味します。
自分のウェブサイトに埋め込む
Mermaid のソースを class "mermaid" の "pre" 要素に貼り付け、CDN からレンダラーを読み込みます。これは公式の ESM 埋め込みです — そのままコピーしてください:
<pre class="mermaid">
flowchart TD
A[Start] --> B{OK?}
B -->|Yes| C[Ship]
B -->|No| A
</pre>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>メジャーバージョンを固定(ここでは mermaid@11)しておけば、将来のリリースで図が予期せず変わることを防げます。JavaScript を使わない静的ページの場合は、エディタから SVG をエクスポートし、それを画像として参照してください。
GitHub README、ステップバイステップ
GitHub は最も一般的な埋め込み先です。ブロックが図ではなくコードとして表示されることがある理由を含む完全な手順については、こちらをご覧ください: GitHub README に Mermaid 図を埋め込む方法.
まずは図を作成しましょう: Mermaid エディタを開く, すぐに使えるサンプル.
よくある質問
プラグインなしで Mermaid をレンダリングするプラットフォームはどれですか?
GitHub、GitLab、Obsidian はフェンス付きの ```mermaid ブロックをネイティブにレンダリングします。Notion は、Mermaid 言語に設定したコードブロック内でプレビュー表示を使ってレンダリングします。Slack、Google Docs、メールなど、その他のほとんどのツールでは、代わりにエクスポートした SVG または PNG 画像が必要です。
Notion に Mermaid 図を埋め込むにはどうすればよいですか?
コードブロックを追加し(/code と入力)、言語を「Mermaid」に変更して、図のソースを貼り付けます。Notion はブロックに図をレンダリングする Preview / Split トグルを表示します。静的なコピーが必要な場合は、エディタから画像をエクスポートして、それを代わりに埋め込みます。
自分のウェブサイトに Mermaid 図を表示するにはどうすればよいですか?
ソースを class "mermaid" の "pre" 要素内に配置し、mermaid.initialize({ startOnLoad: true }) を使って CDN から mermaid.js を読み込みます。このページのスニペットは完全に動作する例です。JavaScript を一切使いたくない場合は、SVG をエクスポートして画像として使用してください。
ソースとエクスポートした画像のどちらを埋め込むべきですか?
プラットフォームが Mermaid をレンダリングする場合(GitHub、GitLab、Obsidian、自分のサイト)は、ソースを埋め込みます — バージョン管理で編集可能かつ差分も取れる状態を保てます。レンダリングしない場合は、SVG または PNG をエクスポートします。SVG はぼやけずに拡大縮小でき、PNG はスライドに適しています。
Confluence は Mermaid に対応していますか?
標準では対応していません。Mermaid マクロを追加する Marketplace アプリが必要か、エクスポートした SVG/PNG 画像を貼り付けることができます。インストールが許可されているアプリについては、Confluence の管理者に確認してください。