dayuan.jiang
366d9ee4ff
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.
2.2 KiB
Offline Deployment
Next AI Draw.io ships with its own copy of draw.io. npm run build (and the Docker build) downloads the draw.io release into public/drawio once, and the app serves it from /drawio. In use, the browser never contacts embed.diagrams.net, so the app works on an offline or intranet network as long as the build had internet access.
Docker Compose Setup
- Clone the repository and define API keys in
.env. - Run
docker compose up -d(it uses thedocker-compose.ymlin the repository). - Open
http://localhost:3000.
No separate draw.io container is needed.
Building Without Internet Access
The build downloads draw.war (about 50 MB) from the draw.io releases. If the build machine cannot reach GitHub:
- On another machine, download
draw.warfor the version inscripts/fetch-drawio.mjs, unzip it intopublic/drawio(deleteWEB-INFandMETA-INF), and write the version, for examplev32.0.2, intopublic/drawio/.version. The build then uses this copy. - Or build the image on a machine with internet access and transfer it to the offline network.
Using a Separate draw.io Server (Optional)
You can still point the app at another draw.io, such as the jgraph/drawio image, with the build-time variable NEXT_PUBLIC_DRAWIO_BASE_URL:
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]
With an external draw.io the app uses draw.io's own toolbar, and these features are off: highlighting what the AI changed, asking about selected shapes, the app's canvas toolbar, and undoing AI changes with Ctrl+Z. Browsers do not let a page control an editor served from a different origin.
The NEXT_PUBLIC_DRAWIO_BASE_URL must be accessible from the user's browser.
| Scenario | URL Value |
|---|---|
| Localhost | http://localhost:8080 |
| Remote/Server | http://YOUR_SERVER_IP:8080 |
Do NOT use internal Docker aliases like http://drawio:8080; the browser cannot resolve them.