WordPressでMermaid図を表示したい時、どうするか
WordPressでMermaidの図を表示したいとその時の検討記録を共有しておきます。
結論としては、私はWordPressにMermaid関連のプラグインは導入しない方向にしました。手元のObsidianで執筆しているのでプレビュー画面をスクリーンショットで撮影して、画像としてWordPressにアップロードする方式を選んでいます。
検討背景
技術系の記事を書いていると、WordPressでMermaid図を表示したい場面が出てきました。最初はプラグイン導入を前提に検討を進めていたのですが、昨今の事情を鑑みて、導入を見送りました。
昨今、2025年後半から2026年にかけてサプライチェーン攻撃が産業化しているとの話が上がっています。特に、「脆弱性発見から攻撃までの猶予が約4時間」と言う情報があったり、「公式リポジトリから削除されてもサイトに残り続けるゾンビプラグイン」が危ない、と言った問題が顕在化している。なので、「公式プラグインだから安全」という前提が崩れており、Mermaid表示のためにプラグインを増やすこと自体は見送りました。
なお、ブログ記事の執筆はObsidianで行い、WordPressには貼り付ける運用を行っています。
検討した選択肢
- プラグイン（MerPress / WP Mermaid）を導入する
- mermaid.jsを自分で管理する（CDN読み込み or 自前ホスト）
- Mermaidを画像化して貼る（Obsidianプレビューのスクショ等）
比較分析
方針1: プラグイン導入
WordPress管理画面からmermaid描画に対応したプラグインを検索・インストールして有効化するとこれを実現できます。調べてみたところ、MerPress / WP Mermaidが有名なようです。
これのメリットは、導入が最も簡単で、Mermaidコードをそのまま貼れることです。ブロックエディタで完結します。
デメリットは、サプライチェーン攻撃の攻撃面が増えることです。特に、WP Mermaidは更新が古イノで、ゾンビプラグイン化のリスクがあります。また、MerPressはインストール数が少ないので、目が行き届きにくく、攻撃を受けても気づかないリスクがあります。
方針2: mermaid.jsを自分で管理する
つまり自分で、functions.phpからCDN（jsdelivr等）でmermaid.jsを読み込む、もしくは自前サーバーにホストして読み込むと言う方法です。
これのメリットは、プラグインに依存せず、自分でバージョン管理可能と言うことです。
デメリットは、自分でバージョン更新が必要ですし、関連する脆弱性の追跡を自分で行う必要があります。要は運用負荷が高まります。そもそも、最近は、Polyfill.io事件等もあり、CDN利用時はCDN自体のサプライチェーン攻撃リスクを背負っています。その対策を真面目に考えると、SRIでのハッシュ固定等が別途必要になってきます。
方針3: 画像化して貼る
普通に、Obsidianのプレビュー画面をスクリーンショットで撮影して、画像としてWordPressにアップロードする方針です。
これのメリットは、当然ながら、プラグイン不要で攻撃面が増えないこと。それから執筆環境（Obsidian）から離れずに完結すること、表示が軽量になることです。
デメリットとして、図の修正のたびに再スクショ・再アップロードが必要であったり、画像内のテキストは検索対象にならないこと、mermaidのコードを残しておかないと編集時に手間がかかること、などがあります。
決定内容
今回は、方針3を採用しました。
Obsidianで記事執筆時にMermaidのプレビューを確認し、その画面をスクリーンショットでキャプチャしてWordPressに画像としてアップロードします。
仕組みを安定して運用したいので、サプライチェーン攻撃のリスク低減を最優先とした判断になっています。
今回は、一つの検討事例の紹介でした。
