Skip to content

Self-hosted draw.io for Diagrams

The Diagrams plugin does not ship draw.io; it loads it. The editor runs in an iframe served by draw.io, and the read-only viewer fetches its stencils, shapes and math typesetting from draw.io as well. By default both use the public https://embed.diagrams.net, so the user's browser needs internet access (the Easy8 server does not).

If your installation has restricted or no internet access, run the official draw.io container inside your network and point Easy8 at it with the EASY_DRAWIO_URL environment variable.

Configuration

EASY_DRAWIO_URL=https://easy.example.com/drawio
  • Unset (the default): the public draw.io is used. Existing installations need no action.
  • Set: the editor and the viewer load everything from that address, and every draw.io cloud integration (Google Drive, OneDrive, GitHub, GitLab, telemetry, PlantUML, converters) is switched off, so nothing leaves the network.

The address must be reachable from the user's browser, not from the Easy8 server. A value that only resolves inside the Docker network (http://drawio:8080) will not work.

Serve draw.io on the same host as Easy8, under the /drawio/ path. The read-only viewer runs inside Easy8 pages and loads stencil libraries (flowchart, mockup, network shapes, …) from draw.io with XHR. The draw.io container sends no CORS headers, so from another host or port the browser blocks those requests and such shapes render as empty boxes in diagram previews. The editor is not affected, which makes the problem easy to miss.

Restart the application after changing the variable.

Running the container

The official image is jgraph/drawio (source). With DRAWIO_SERVER_URL ending in a path it serves draw.io under that path, on port 8080.

As a compose service alongside Easy8:

services:
  drawio:
    image: jgraph/drawio
    restart: always
    environment:
      DRAWIO_SERVER_URL: https://easy.example.com/drawio/
    ports:
      - "127.0.0.1:8080:8080"

Then route the path in the HTTPS proxy in front of Easy8 (see the Nginx example in docker/README.md), inside the same server block:

location /drawio/ {
  proxy_pass http://127.0.0.1:8080;
  proxy_set_header Host $host;
  proxy_set_header X-Forwarded-Proto $scheme;
}

Set EASY_DRAWIO_URL=https://easy.example.com/drawio, restart app and sidekiq, and reload the proxy.

To upgrade draw.io, pull a newer image.

What the setting covers

Item Loaded from
Editor iframe <EASY_DRAWIO_URL>/?embed=1
Stencils, shapes, styles, images, templates, resources, mxGraph assets <EASY_DRAWIO_URL>/
MathJax used to render LaTeX inside diagrams <EASY_DRAWIO_URL>/math4/es5
Google Drive / OneDrive / GitHub / GitLab / telemetry / converters disabled

Diagram data itself is always stored in Easy8 (diagrams table plus a PNG attachment) and is never sent to draw.io. That is true with or without this setting.

Verifying

  1. Open a diagram and check the browser's network tab: every request should go to Easy8 or to EASY_DRAWIO_URL, and none to diagrams.net or draw.io.
  2. Edit and save a diagram, then reopen it. The change must survive the round-trip.
  3. Open a diagram preview (the modal from the diagram list, or a wiki include_diagram macro) and confirm it renders.
  4. Preview a diagram that uses library shapes (e.g. Flowchart or Mockup): they must render, and the browser console must show no CORS errors.