Files
next-ai-draw-io/docs/ja/offline-deployment.md
T
dayuan.jiang 366d9ee4ff feat(ui): canvas-first redesign with a self-hosted draw.io
The canvas now fills the window and the chat floats on its right. draw.io is
served from our own origin (public/drawio, downloaded at build time and
checked against the release's SHA-256), so the app can drive the editor
directly:

- every AI change becomes a version card with a thumbnail; compare, restore
  or undo it, and Ctrl+Z on the canvas takes an AI change back in one step
- shapes the AI just changed are highlighted on the canvas
- selected shapes appear as a chip and are sent to the model
- the app's own canvas toolbar, shape library and page tabs replace
  draw.io's chrome
- new start screen, session rename and switcher, open .drawio files
- settings split into Models & keys, Appearance, Advanced and About
- phones switch between canvas and chat
- dark mode keeps the diagram on a white sheet and no longer flashes

With an external draw.io (NEXT_PUBLIC_DRAWIO_BASE_URL) the app falls back to
draw.io's own toolbar and the features above that need same origin are off.

The chat logic moved from the 1500-line chat panel into a chat engine plus
small UI components; zustand holds canvas, versions, settings and UI state.
2026-10-06 22:01:09 +09:00

3.0 KiB

オフラインデプロイ

Next AI Draw.io には draw.io のコピーが同梱されています。npm run build(Docker ビルドを含む)が draw.io のリリースを一度だけ public/drawio にダウンロードし、アプリは /drawio からそれを配信します。利用中のブラウザは embed.diagrams.net にアクセスしないため、ビルド時にインターネットに接続できれば、オフライン環境やイントラネットでも動作します。

Docker Compose のセットアップ

  1. リポジトリをクローンし、.env ファイルに API キーを定義します。
  2. docker compose up -d を実行します(リポジトリの docker-compose.yml を使います)。
  3. http://localhost:3000 を開きます。

draw.io 用の別コンテナは不要です。

ビルド環境がインターネットに接続できない場合

ビルドは draw.io のリリース から draw.war(約 50 MB)をダウンロードします。ビルド環境から GitHub にアクセスできない場合は、次のどちらかを行ってください。

  • 別のマシンで scripts/fetch-drawio.mjs に書かれたバージョンの draw.war をダウンロードし、public/drawio に展開します(WEB-INF と META-INF は削除)。さらにバージョン(例:v32.0.2)を public/drawio/.version に書き込みます。ビルドはこのコピーを使います。
  • インターネットに接続できるマシンでイメージをビルドし、オフライン環境に転送します。

別の draw.io サーバーを使う場合(任意)

ビルド時の変数 NEXT_PUBLIC_DRAWIO_BASE_URL で、jgraph/drawio イメージなど別の draw.io を使うこともできます。

services:
  drawio:
    image: jgraph/drawio:latest
    ports: ["8080:8080"]
  next-ai-draw-io:
    build:
      context: .
      args:
        - NEXT_PUBLIC_DRAWIO_BASE_URL=http://localhost:8080
    ports: ["3000:3000"]
    env_file: .env
    depends_on: [drawio]

外部の draw.io を使うと、アプリは draw.io 自身のツールバーを使い、次の機能は使えなくなります:AI が変更した図形の強調表示、選択した図形についての依頼、アプリのキャンバスツールバー、Ctrl+Z による AI の変更の取り消し。ブラウザは、別のオリジンから配信されたエディターをページから操作することを許可しないためです。

NEXT_PUBLIC_DRAWIO_BASE_URL は、ユーザーのブラウザからアクセスできる必要があります。

シナリオ URL の値
ローカルホスト http://localhost:8080
リモート/サーバー http://YOUR_SERVER_IP:8080

http://drawio:8080 のような Docker 内部のエイリアスは絶対に使用しないでください。 ブラウザはこれらを名前解決できません。