Draw.io動的ビューアーテスト

概要

このページは、Draw.ioファイル（.drawio）を動的に読み込んで表示するテストページです。 ファイルを編集して保存すると、ページをリロードすることで最新の図が表示されます。

freee・AI経理システム アーキテクチャ図

以下の図は content/2025-11-18/freee-ai-system.drawio から動的に読み込まれています。

読み込み中...

特徴

  • ✓ Draw.ioファイルを直接読み込んで表示
  • ✓ ファイルを編集したら、ページをリロードするだけで反映
  • ✓ SVG/PNGへのエクスポート不要
  • ✓ Gitで履歴管理可能

技術的な仕組み

このビューアーは以下の手順で動作しています：

  1. VueコンポーネントがマウントされたときにDraw.ioファイルをfetchで取得
  2. XMLデータをdata-mxgraph属性用のJSON形式に変換
  3. div要素のdata-mxgraph属性にJSONデータを設定（class="mxgraph"）
  4. viewer-static.min.jsを動的にロードして図を描画

この方法の利点

  • ✓ CORSエラーなし（localhostでも動作）
  • ✓ iframeを使わないため、ページに直接埋め込まれる
  • ✓ 公式のviewer-static.min.jsライブラリを使用
  • ✓ インタラクティブな操作（ズーム、レイヤー表示など）が可能

ソースファイル

表示している図のソースファイル: /content/2025-11-18/freee-ai-system.drawio