mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-10-09 03:07:46 +08:00

Files

T

dayuan.jiang ffed9b6062 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
- draw.io's own simple UI: its toolbar, menus (auto layout, Mermaid, CSV
  import) and page tabs; the shape library starts closed
- new start screen, session rename and switcher, open .drawio files
- settings split into Models & keys, Appearance, Advanced and About
- Bedrock in the model settings also takes an API key instead of access keys
- phones switch between canvas and chat
- dark mode uses draw.io's own dark mode, with neutral greys around it

With an external draw.io (NEXT_PUBLIC_DRAWIO_BASE_URL) 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-08 13:16:57 +09:00

3.5 KiB

Raw Blame History

オフラインデプロイ

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 は静的ファイルだけで、draw.io の画像プロキシ（/drawio/proxy）は含まれません。ほかのサイトの画像を URL で挿入するとキャンバスには表示されますが、エクスポートした PNG・SVG やバージョンのサムネイルには入りません。draw.io はこうした画像をこのプロキシ経由で取得するためです。こうした画像はファイルから挿入してください。draw.io が図の中に保存します。

別の 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 内部のエイリアスは絶対に使用しないでください。 ブラウザはこれらを名前解決できません。

3.5 KiB Raw Blame History