生成AIが作ったMermaid図がWordPressで崩れる！プラグイン一発で解決した話

2025.08.30

はじめに：AIアシスタントとのブログ執筆が当たり前になる時代
AIによる診断：なぜMermaidはそのまま表示されないのか？
解決へのステップ：AI推奨のプラグイン「MerPress」を導入する
結果：美しく表示されたシーケンス図
結論：人間とAIの「得意」を組み合わせる新しいブログ運営

はじめに：AIアシスタントとのブログ執筆が当たり前になる時代

最近、私の開発ブログの記事執筆は、強力な相棒である生成AIアシスタントと共に行っています。複雑な技術解説の記事を書く際、視覚的な図解は欠かせません。先日も、システムの動作フローを説明するために「シーケンス図を作って」とお願いしたところ、AIは即座にMermaid記法で完璧なコードを生成してくれました。

しかし、そのコードを意気揚々とWordPressの投稿に貼り付けたところ、表示されたのは図ではなく、ただの無機質なテキストの羅列でした。「せっかくAIが作ってくれたのに、これでは読者に伝わらない…」と、私は頭を抱えてしまいました。

AIによる診断：なぜMermaidはそのまま表示されないのか？

もちろん、私はすぐにAIアシスタントに相談しました。「このMermaidのコード、WordPressだとただの文字になっちゃうんだけど、どうして？」

AIからの回答は明快でした。

「WordPressの標準エディタは、Mermaid記法を解釈して図に変換する機能を持っていないためです。しかし、ご安心ください。専用のプラグインをインストールするだけで、簡単に解決できますよ」

なるほど、原因はWordPress側にあったのです。言われてみれば当然のことでした。AIは問題を特定するだけでなく、即座に解決策まで提示してくれました。

解決へのステップ：AI推奨のプラグイン「MerPress」を導入する

AIの助言に従い、私はWordPressのプラグイン導入作業に取り掛かりました。手順は驚くほど簡単です。

ステップ1：プラグインの新規追加画面へ

WordPressの管理画面にログインし、左側のメニューから「プラグイン」>「新規追加」と進みます。

ステップ2：「Mermaid」で検索

画面右上の検索ボックスに「Mermaid」と入力して検索します。すると、関連するプラグインがいくつか表示されました。

ステップ3：「MerPress」をインストールして有効化

AIは、Mermaidに特化したシンプルなプラグインを推奨してくれました。検索結果の筆頭に表示された「MerPress」がまさにそれでした。私は迷わず「今すぐインストール」ボタンをクリックし、インストール完了後に「有効化」ボタンを押しました。

たったこれだけで、私のWordPressはMermaid図を理解する能力を手に入れたのです。

結果：美しく表示されたシーケンス図

プラグインを有効化した後、記事の編集画面に戻ると、魔法が起きていました。エディタのブロック追加機能（「+」ボタン）から「Mermaid」を検索すると、専用のブロックが追加できるようになっています。

そのブロックに、AIが最初に作ってくれたMermaidコードを貼り付け、プレビュー画面を確認すると… 見事にレンダリングされた、綺麗なシーケンス図が表示されていました！テキストがただの文字列だった悲劇は、もうそこにはありません。

ブロックで以下の通りにMerPressを作り、

作成したブロックにMermaid記法で記載するだけで、WordpressでMermaid図が作成できます。

以下は作成した、Mermaid図のサンプルです。

sequenceDiagram
    participant Cron as "Cron Job"
    participant Tool as "Malware Analyzer (Python)"
    participant ES as "Elasticsearch (T-Pot)"
    participant VT as "VirusTotal API"
    participant WP as "WordPress REST API"

    Cron->>Tool: 定期実行（例: 15分ごと）
    Tool->>ES: HTTPS経由で新規マルウェア<br/>ハッシュを問い合わせ
    ES-->>Tool: 前回実行以降の<br/>ハッシュリストを返却

    loop 各ハッシュごと
        Tool->>VT: ハッシュの分析をリクエスト
        VT-->>Tool: 分析レポートを返却
        Tool->>WP: 整形したレポートを投稿
        WP-->>Tool: 投稿成功を応答
    end

結論：人間とAIの「得意」を組み合わせる新しいブログ運営

今回の経験は、生成AIとの共同作業がいかにパワフルであるかを示す素晴らしい例でした。

AIの得意なこと： 専門知識に基づき、Mermaidのようなコードを瞬時に生成すること。問題の原因を特定し、的確な解決策を提示すること。
人間の得意なこと： 最終的な目標（ブログ記事を完成させる）を設定すること。AIの助言に基づき、WordPressの管理画面を操作してプラグインを導入すること。

AIに任せられる部分は任せ、人間はより創造的な作業や最終的な調整に集中する。そんな新しいブログ運営の形が、プラグイン一つでまた一歩、現実のものとなりました。もしあなたがAIとブログを書いていて同じ問題に直面したら、ぜひこの方法を試してみてください。