mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-10-07 10:17:47 +08:00
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.
3.0 KiB
3.0 KiB
オフラインデプロイ
Next AI Draw.io には draw.io のコピーが同梱されています。npm run build(Docker ビルドを含む)が draw.io のリリースを一度だけ public/drawio にダウンロードし、アプリは /drawio からそれを配信します。利用中のブラウザは embed.diagrams.net にアクセスしないため、ビルド時にインターネットに接続できれば、オフライン環境やイントラネットでも動作します。
Docker Compose のセットアップ
- リポジトリをクローンし、
.envファイルに API キーを定義します。 docker compose up -dを実行します(リポジトリのdocker-compose.ymlを使います)。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 内部のエイリアスは絶対に使用しないでください。 ブラウザはこれらを名前解決できません。