mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-10-08 18:57:47 +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

2.6 KiB

Raw Blame History

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 the docker-compose.yml in 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.war for the version in scripts/fetch-drawio.mjs, unzip it into public/drawio (delete WEB-INF and META-INF), and write the version, for example v32.0.2, into public/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.

Images From Other Websites

The bundled draw.io is static files only, without draw.io's image proxy (/drawio/proxy). An image inserted by its web address from another site shows on the canvas, but exports (PNG, SVG) and version thumbnails leave it out, because draw.io fetches such images through that proxy. Insert these images from a file instead: draw.io then stores them inside the diagram.

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.

2.6 KiB Raw Blame History