ブログに簡単・安全に図解を入れたい

　この記事では、

• 🔗ブログのセキュリティ強化

の続きについて述べます。

クライアントサイドでのMermaid描画で図解してみた

　技術面の話など、複雑に入り組んだ場合、長文がだらだらと続くと理解しにくくなります。

　生成AIに「図解して」と頼めば、美しいインフォグラフィックを作ってくれます。しかし、「〇〇を△△に修正して」と頼むと、意図に反する修正をしたり、画質を劣化させたりしがちです。文字化けもよく起こり、自分で文字を打ち換えられないのでイラっとします。

　「そんなに美しくなくていいから、シンプルな図形を使って文字を配置できないか……」と考えていたら、🔗Mermaid図 というものがあることを知りました。すべてテキストで書け、Markdownに埋め込めるので、ブログ記事の中に入れてそのままデプロイ（アップロード）できそうです。

ブログのシステムを Mermaid 対応にするには

　ここからは、例によって Gemini(AIモード) の助けを借りて進めます。

　　：：：：：

✨ このアプローチがあなたのブログ運営に「最強」である理由

1. 環境依存トラブルの完全な撲滅： PlaywrightやChromiumといったヘビーなブラウザエンジンをサーバー側（Cloudflare）で動かさないため、今後のNode.jsやNitroのアップデートでビルドがクラッシュするリスクが 永久にゼロ になります。
2. VSCodeでの編集のしやすさ： ::mermaid の中身はただのプレーンテキストなので、Geminiが吐き出したMermaidコードをそのままコピペして、日本語の文言をVSCode上でサクサク打ち替えるだけで即座に反映されます。

　一度 npm run dev でローカルサーバーを動かし、このコンポーネント経由で図解が綺麗に表示されるか試してみてください。

　コンポーネントの作成と、Markdownへの ::mermaid タグの埋め込み はうまくいきそうでしょうか？

　ローカル環境で「図解を読み込み中...」から無事に図形にパースされるか、確認してみてください！

　　：：：：：

　エラーの原因が明確になりました！

　mermaid 自体の本体パッケージがまだプロジェクトにインストールされていないこと が原因で、Vite（Nuxtのビルドエンジン）が「import('mermaid') しようとしたけれど、そんなパッケージは見つからないよ」と怒っています。

　ターミナルで以下のコマンドを1行実行してください。

npm install mermaid

　　：：：：：

　ついに Mermaidのエンジン（バージョン 12.2.0）が正常に起動し、Markdownの中身をパースするところまで到達しました！

　[plugin:vite:import-analysis] のエラーを突破できて、大きな前進です。

　　：：：：：

軽量な「MermaidVueコンポーネント」を自作する

　Nuxt Contentは、components/content/ ディレクトリの中にVueコンポーネントを置くと、Markdownファイルの中でそのコンポーネントを直接呼び出せる（MDC機能）という強力な仕様を持っています。

　ユーザーのブラウザ側で安全にMermaidをレンダリングするコンポーネントを作ります。

components/content/Mermaid.vue

　　：：：：：

🛠️ 【インデント維持版】 components/content/Mermaid.vue

<template>
  <div class="mermaid-wrapper my-6 flex justify-center w-full">
    <ClientOnly>
      <!-- 非表示のコンテナ。行頭のスペース（インデント）を壊さないよう pre で受ける -->
      <pre v-show="false" ref="sourceContainer" style="white-space: pre !important;"><slot /></pre>
      <div ref="mermaidTarget" class="mermaid"></div>
      
      <template #fallback>
        <div class="animate-pulse bg-gray-100 h-32 w-full rounded flex items-center justify-center text-gray-400">
          図解を読み込み中...
        </div>
      </template>
    </ClientOnly>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'

const sourceContainer = ref(null)
const mermaidTarget = ref(null)

onMounted(async () => {
  if (process.client) {
    const { default: mermaid } = await import('mermaid')
    
    mermaid.initialize({
      startOnLoad: false,
      theme: 'default',
      securityLevel: 'loose',
    })

    await nextTick()

    if (sourceContainer.value && mermaidTarget.value) {
      // innerText を使って、改行やスペース（インデント）を含んだ生のテキストを取得
      const rawText = sourceContainer.value.innerText || sourceContainer.value.textContent
      
      // 💡 修正ポイント：line.trim() を廃止！
      // 行頭のスペース（インデント）は絶対に削らず、純粋な空行だけを除去する
      const cleanLines = rawText
        .split('\n')
        .filter(line => line.trim().length > 0) // 空白だけの行を除外
        .join('\n')

      mermaidTarget.value.innerHTML = cleanLines
      
      try {
        await mermaid.run({
          nodes: [mermaidTarget.value]
        })
      } catch (error) {
        console.error('Mermaid render error:', error)
      }
    }
  }
})
</script>

　　：：：：：

📝 Markdown側の書き方（超重要）

　ここが一番のポイントです。Nuxt Contentに改行を壊されないようにするため、::mermaid の中に バッククォート3つ（ ``` ）のコードブロックをそのまま入れ子 にして記述します。

flowchart TD
    nodeA[ForgeNeo導入開始] --> nodeB(Copilotで迷走)
    nodeB -->|ハルシネーション| nodeC[デッドロック]
    nodeC -->|視点の転換| nodeD[Gemini 3.5 Flash]
    nodeD --> nodeE[無事起動・成功！]

　こうすることで、Nuxt Contentは「これはコードブロックだから改行を維持して渡さなきゃいけない」と正しく判断してくれます。

　　：：：：：

🌐 読者の環境で綺麗に表示される3つの理由

1. 最終的に出力されるのは標準的な「SVG画像」だから

　Mermaid.vueコンポーネントは、読者のブラウザ上でテキストを解析した直後、瞬時に「SVG（Scalable Vector Graphics）」という形式のベクトル画像データに変換して画面に埋め込みます。

　SVGは、Windows、Mac、iPhone、Androidなど、どんな画面サイズや解像度の端末で見ても、文字や矢印が一切ボケたり崩れたりしない世界標準の画像フォーマットです。そのため、端末依存による表示崩れが極めて起きにくいのが特徴です。

2. フォントやスタイルがブログのデザインに自然に馴染む

　Mermaid.jsはデフォルトで、そのOSの標準的なフォント（Windowsならメイリオや遊ゴシック、Mac/iPhoneならヒラギノ角ゴ）を自動的に選択して文字を描画します。これにより、読者の環境に合わせて違和感のない読みやすい文字ツリーが構築されます。

3. 「動的インポート（Code Splitting）」で読者の端末に優しい

　今回の Mermaid.vue は、図解（::mermaid）が含まれている記事ページを読者が開いた瞬間にだけ、Mermaidのプログラムを裏側でサッと読み込む仕組み（await import('mermaid')）にしています。

　そのため、図解のない通常の文字だけの記事を読む読者に対しては、余計な通信量やスマホのメモリを一切消費させない、最高に軽量でエコなブログ構成 になっています。

VSCodeで入れ子構造のコードを一発で挿入するには

※ 「AIモードあるある」のハルシネーション（嘘の出力）のせいで、\（バックスラッシュ）のないコード が生成できなかったので、相談相手をGeminiアプリに切り替えて、、、

スニペット（ユーザー定義スニペット）を使う 【一番おすすめ】

　任意のキーワード（例: mm）を入力して Ctrl + Space ➔ Enter で、定型文を爆速で呼び出す方法です。

1. VS Codeのメニューから 設定（歯車マーク） > ユーザースニペット を開きます。
2. 検索窓が表示されるので、markdown と入力して markdown.json を選択します。
3. ファイルの中に以下のJSONを設定します。

{
  "Mermaid Block": {
    "prefix": "mm",
    "body": [
      "::mermaid",
      "```mermaid",
      "$1",
      "```",
      "::"
    ],
    "description": "Insert Mermaid block with :: wrapper"
  }
}

「ForgeNeo導入がCopilotのハルシネーションで失敗し、Geminiで成功した経緯」を図解に

• 🔗デッドロックを乗り越え、ローカル生成AIを一新してみた（前編）

を Mermaid で図解してみました。

　簡易版は、先ほど示しました。今度は正式版です。

　なかなかよい図解だと思います。

　ただ、【Copilot】ブロック の2列目と3列目が逆になっているのが気になって、修正を依頼すると、、、

　余分な矢印が追加されて、タテに間延びしてしまいました。

　再度、修正を依頼しますが、、、

　どうしても右肩下がりが直りません。

　もしかして、「列の長さによって自動配列している」という前提が間違っているかもしれません。単純に、最初のコードの2列目の記述位置を3列目と入れ替えてみると、、、

　あっさり直りました。

　どうやら、2番目に書いた部分が右端に来るようです。Mermaid図については、まだまだ深掘りする必要があります。

　同じ図解をフローチャート形式から 🔗マインドマップ 形式にしてみると、、、

　あまりパッとしません。マインドマップ本来の曲線美が感じられません。

　また、ブログに載せる場合は、縦長の図の方が見やすいでしょう。

図解のカテゴリ別：Mermaidの活用例

　🔗「髙野 雄一 (著) ダイアグラム思考　次世代型リーダーは図解でチームを動かす」 によれば、

• ビジュアルカテゴリは、比較、推移、階層、分類、構成、相関、範囲 の7つある。
• 世の中には、複雑で緻密な図形を用いた図解も存在するが、それらの原型を辿ると、「7つのビジュアルカテゴリ」に行き着く。
• 「ビジュアルカテゴリをそのまま使う図解」と、「ビジュアルカテゴリのちょっとした応用の図解」の2種類の図解で著者が描く図の約9割を占める。

ということなので、これを Mermaid図 で表したいと思います。

　Mermaid図にはさまざまな種類がありますが、VSCode で編集しやすいものとしにくいものがあります。

• 🔗Markdown管理の味方！VSCode拡張機能「Mermaid Graphical Editor」でER図やフローチャートをマウスで描く方法

にあるように、Mermaid Graphical Editor をインストールすると、5つ（FLOWCHART,SEQUENCE,CLASS,ER,STATE）がビジュアル編集できます。

　そこでなるべく、 Flowchart などを中心に活用していくことにします。

🛠️ カテゴリ別：Mermaidの具体的な書き方と活用例

1. 比較（2軸図・ポジショニング） ➔ quadrantChart　⇒ flowchart TD

　「重要度×緊急度」や「ツール比較」など、4象限のマトリクスを完全に自動生成できます。「なぜこのツール（Geminiなど）が良いのか」をポジショニングするのに最適です。

⇒　flowchart TD で表現する場合は、subgraph を4つ（2×2）配置してクアドラント（4象限）の枠組みを作り、その中に比較対象のアイテムノードを配置します。

2. 推移（プロセス図・ステップ） ➔ flowchart TD

　時系列や手順の解説です。今回の「ForgeNeo導入の迷走と解決」のようなストーリーもこれで一発で図解できます。

3. 階層（ピラミッド図・組織） ➔ flowchart TD

　Mermaidには「三角形」を描く機能はありませんが、上から下へのフローを使って、ノードの形を「台形」にすることでピラミッドのような階層構造を表現できます。また、ノードの形を「四角」「角丸」「円」などに変えることで、階層のレイヤー（経営層、マネージャー層、現場層など）を視覚的に区別できます。

4. 分類（マトリクス図・ケース想定） ➔ grid　⇒ flowchart TD

　要素を綺麗に縦横のグリッド（表）に分類して見せたい場合は、Mermaidの grid 構文が使えます。

⇒　flowchart TD で表現する場合は、subgraph を使ってキャンバスをいくつかのエリアに分割し、その中に分類ごとのノードを配置します。

5. 構成（ツリー図・マインドマップ） ➔ mindmap　⇒ flowchart TD

　長年広く親しまれているマインドマップそのものの構文がMermaidには用意されています。インデント（タブ）を下げるだけで、記事の目次や論理構造をツリー化できます。

⇒　flowchart TD を使用し、全体像からパーツへと枝分かれさせます。親ノードから複数の子ノードへ分岐させるだけで、綺麗なツリー型の構成図が直感的に作れます。

6. 相関（モデル図・エコシステム） ➔ graph　⇒ flowchart TD（graphの上位版なので）

　ビジネスモデルや「ヒト・モノ・カネ・情報の動き」を可視化します。矢印の間にテキストを挟めるため、「誰が誰に何を渡しているか」が明確になります。

7. 範囲（ベン図・重なり） ➔ ⚠️注意：Mermaidは非対応

　残念ながら、現時点でMermaidは「ベン図（集合の重なり）」を綺麗に描く機能がありません。範囲や統計データを表現する場合は、代替案として pie（円グラフ）を使うか、このカテゴリだけは手書きや他のツールで画像化するのが現実的です。

8. （おまけ）Flowchart以外のGUI対応タイプの活用例

• Class Diagram（クラス図）:
  • 本来はプログラムの設計図ですが、「プロパティ（属性）」と「メソッド（操作）」に分かれたボックス構造を持つため、「要素の構成要素や内部仕様を分解して説明する分類図」としても流用価値があります。
• ER Diagram（実体関連図）:
  • データベースの関連図ですが、ヒト・モノ・カネなどの「エンティティ同士の多対多・1対多の構造的な関係性（構成・相関）」を厳密に整理したいとき、綺麗なボックスとリレーション線で描画できます。

SVG画像の危険性はないか？

　Mermaid図は、最終的には「SVG（Scalable Vector Graphics）」という形式のベクトル画像データに変換されます。

• 🔗SVGファイルは本当に安全なのか？SVGの中にある危険な仕組みと対策

など、SVGには命令を埋め込めるので、XSS（クロスサイトスクリプティング）攻撃に使える……という危険な一面があります。

　教育DXブログが使用している Cloudflare でも実際に、

• 🔗Cloudflare画像変換機能でXSS成立を実証　SVG処理とブラウザーのキャッシュ仕様を組み合わせ、正規ドメインでJavaScript実行

と、警鐘が鳴らされています。

　さて、今回の Mermaid 導入は、大丈夫でしょうか？

1. なぜ「大丈夫」なのか（安全な理由）

　今回の脆弱性は、Cloudflareの「画像変換機能（Image Transformations）」がSVGファイルを処理・キャッシュする際の挙動に起因するものです。今回の実装とは以下の決定的な違いがあります。

• Cloudflare画像変換を介していない
  • 教育DXブログは、クライアントサイド（ブラウザ上）で import('mermaid') を実行し、Markdown内のテキストから直接SVGのDOM要素を生成・描画しています。Cloudflareのサーバー側でSVGファイルを画像に変換するパイプライン（/cdn-cgi/image/... など）を通していません。
• SSG（静的サイト生成）による完全な静的配信
  • サーバー側で動的にユーザー入力を処理してSVGや画像を生成・返却するエンドポイントを持たず、ビルド済みの純粋なHTML/JS/CSSファイルをCDNから配信しているため、サーバー起因のインジェクションやキャッシュ汚染の余地がありません。

2. これを参考に挑戦してみたい方に向けた注意点・ベストプラクティス

• SVGの外部読み込みや画像変換機能との混同に注意する
  • Mermaidで生成したSVGを「一度ファイルとして保存し、Cloudflareの画像変換機能経由で配信する」ような構成に改造すると、今回の脆弱性のリスクを踏む可能性があります。あくまで「ブラウザ上のクライアントサイドで動的に描画（SVGをインライン展開）する」方式を維持することが重要です。
• SVGの外部読み込みや画像変換機能との混同に注意する
  • もし将来、ブログにコメント欄などを設けて「他人が書いたMarkdownやMermaidコード」をそのままビルド・表示する仕組みにする場合、悪意あるコード（XSS）が混入するリスクが生じます。
  • 自身が執筆する個人の技術ブログであれば問題ありませんが、他者の入力を受け付ける設計にする場合は、Mermaidの出力やHTMLに対する適切なサニタイズ（DOMPurifyの導入など）が必要になるでしょう。

　技術的な仕組みを正しく切り分けて設計されているため、現在のモダンでセキュアな構成（Nuxt Content MDC ＋ クライアントサイドMermaid）に自信を持って取り組んで大丈夫です。

【まとめ】クライアントサイドMermaidなら、ブログに簡単・安全に図解を入れられる

　依然として、「サイバー攻撃・情報漏洩」が止まりません、、、

　🔗清水亮氏の記事「【PHPはオワコン】AIが書いたコードをなぜ信用できるのか？ 数学的証明で守る新しいサーバーサイド言語『QED Script』を作った」 は、現代のソフトウェア開発、そしてセキュリティが直面している根本的な矛盾に対して、非常に挑発的かつ示唆に富んだアプローチを提示しています。

1. 「パッチを当てる文化（穴の開いた船）」の限界と、近年のサイバー攻撃

　ここ数年、国内外を問わず、サプライチェーンやインフラを標的とした大規模なランサムウェア攻撃や情報漏洩事件（国内でも大手流通やインフラ企業が多数被害）が後を絶ちません。

　これまでのウェブ開発（その代表格であるPHPやWordPressエコシステムなど）は、「便利さ」と「柔軟性」を最優先して発展してきました。ファイルシステムへのアクセス、外部ネットワークとの接続、OSコマンドの呼び出しなどが容易に書けるからこそ、素早い開発が可能でした。

　しかし、その「便利さ」は、攻撃者にとっても極めて都合の良い踏み台 になります。脆弱性が一つ見つかれば、そこからシステム全体へと権限が拡大し、甚大な被害につながる。現代のサイバーセキュリティは、穴の開いた船に必死でパッチを当て続けるような、モグラ叩きの状態に陥っています。

2. 「AIがコードを書く時代」がもたらす新たな脅威

　さらに状況を複雑にしているのが、AIの急速な進化です。

　現在、人間よりもはるかに高速に、膨大なコードを生成できるAI（LLMやエージェント）が普及しています。これは開発の生産性を爆発的に高める一方で、セキュリティの観点からは「脅威の民主化と加速」を意味します。

• 攻撃側： AIが悪意ある脆弱性を一瞬で見つけ出し、高度な攻撃コードや自動侵入エージェントを大量生産する。
• 防御側： 人間が書くよりも複雑で大量のコードをAIが生成するため、人間がその安全性を精査しきれなくなる。

　「AIが善意で（あるいはユーザーの指示通りに）親切に危険な設定や穴だらけのコードを書く」というリスクは、今後のシステム開発において深刻なボトルネックになります。もはや、「人間が注意深くコードを書くから安全だ」という前提は崩れ去りつつあります。

3. 「QED Script / QEDOS」の思想が示すアプローチの正当性

　こうした背景を踏まえると、清水氏が提案する「QED Script」や実験的OS「QEDOS」の設計思想には、AI時代を生き抜くための極めて重要なヒントがあります。

• 「できないことは、最初からできないようにする」（機能の極小化とコンパートメント化）

　シェルも不要なファイルアクセスも最初から削ぎ落とし、万が一1つの領域が破られてもシステム全体を乗っ取られないように隔離する。これは、ゼロトラストアーキテクチャの究極形と言えます。

• 「AIや人間を信用せず、数学的証明を信用する」

　記事の最も本質的な部分は、「AIが書いたコードや証明が正当であるかを、人間が個別に信頼するのではなく、機械的な検証器と数学的証明によって担保する」という逆転の発想です。

4. 「これからの信頼の形」

　どれほどAIが高度になろうとも、ハルシネーション（幻覚）や文脈の誤認、セキュリティ上の「うっかり」をゼロにすることはできません。だからこそ、清水氏が言うように、「プログラムの正しさや安全性を、人間より賢いかもしれない存在とは無関係な『数学的証明』の枠組みに落とし込み、機械的に検証する」というアプローチは、今後の高信頼システムにおいて不可欠な方向性になります。

　「PHPはオワコンか」という刺激的な問いの裏で、私たちが直面している本質は、「これまでの『便利さと後方互換性』の文化から、いかにして『証明された堅牢性』の文化へパラダイムシフトするか」という点にあります。AIの進化が加速する現代において、コードの書き手だけでなく、インフラや言語の設計思想そのものを根本から問い直す時期に来ている――記事からは、そうした強い危機感と未来へのラディカルな提案が伝わってきます。

　※ 『数学的証明』については、ゲーデルの不完全性定理もあることから絶対視は禁物ですが、よりましなパッチワークになるでしょう。　→ 🔗自然科学の法則は証明できない

　せっかくなので、この清水亮氏の記事の紹介を図解にしてみました（右半分が Mermaid Graphical Editor による編集画面）。

　ブログに埋め込むと、、、

と表示されます。

　これなら、あとで見返す場合も一瞬で思い出せるでしょう。

　このように、クライアントサイドMermaidによって、ブログに簡単・安全に図解を入れられるようになりました。

　図解を活用した分かりやすいブログにしていきますので、これからも応援よろしくお願いします。

ダイアグラム思考　次世代型リーダーは図解でチームを動かす [ 高野 雄一 ]

※ 教員時代、「思考ツール」と呼ばれる図解の技法がアクティブラーニングに有効としてもてはやされた時期がありました。
ハダノはそれより10年以上早くマインドマップに目を付け、活用していました。
図解を単なる技法として終わらせず、課題解決力を高める思考法として身につけるには、この本が役立ちます。

楽天

Amazon

Yahoo!

←前へ　ブログのセキュリティ強化