Skip to main content

draw.io

Deployment and configuration of draw.io as an optional Docker Compose service.

📋 Prerequisites​

The bundled draw.io service is exposed through the Nginx reverse proxy. An external draw.io server can be configured instead and does not require the local container or its Nginx include.

⚡ Activation​

Follow these steps to run draw.io locally with the Sync-in Docker Compose setup.

Nginx configuration​

In ./config/nginx/nginx.conf, uncomment the draw.io include at the end of the file:

include drawio.conf;

In ./config/nginx/docker-compose.nginx.yaml, ensure that the draw.io configuration is mounted in the Nginx container:

services:
  nginx:
    volumes:
      - ./drawio.conf:/etc/nginx/drawio.conf

The supplied drawio.conf exposes the service under /drawio/ and adds the CORS header required by the sandboxed local iframe. Keep that header when adapting the proxy configuration.

Docker Compose configuration​

In docker-compose.yaml, uncomment the required Docker Compose files:

include:
  - ./config/nginx/docker-compose.nginx.yaml
  - ./config/drawio/docker-compose.drawio.yaml

The draw.io container listens on port 8080 inside the Docker network. No host port needs to be published when it is accessed through Nginx.

Sync-in configuration​

In environment.yaml, enable the draw.io integration:

server:
  # Optional for now; required in the next major release
  publicUrl: 'https://sync-in.domain.com'
applications:
  files:
    editors:
      drawio:
        enabled: true
info

Run docker compose up -d && docker compose restart nginx sync_in to apply the changes.

🌐 Access​

With the local service, the browser loads draw.io from the /drawio/ path on the Sync-in public URL. Set server.publicUrl to the exact address used to access Sync-in, including any non-standard port. If omitted, Sync-in uses the request origin forwarded by Nginx as a compatibility fallback.

To use an existing draw.io deployment instead, do not include the local draw.io Compose service or drawio.conf. Configure its browser-accessible URL as follows:

applications:
  files:
    editors:
      drawio:
        enabled: true
        externalServer: 'https://drawio.my-domain.com'

For isolation, use a dedicated origin for an external draw.io server rather than serving it from the Sync-in origin. Sync-in automatically adds the configured origin to its Content Security Policy; no manual CSP directive is required.

Supported formats​

  • .drawio and .dwb files can be viewed and edited directly.
  • .vsdx and .gliffy files can be opened without changing the source file. Saving changes creates a new .drawio file in the same directory after prompting for its name.

Sync-in uses an exclusive file lock while editing native draw.io files.