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¶
- 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¶
- Open a diagram and check the browser's network tab: every request should go to Easy8 or to
EASY_DRAWIO_URL, and none todiagrams.netordraw.io. - Edit and save a diagram, then reopen it. The change must survive the round-trip.
- Open a diagram preview (the modal from the diagram list, or a wiki
include_diagrammacro) and confirm it renders. - Preview a diagram that uses library shapes (e.g. Flowchart or Mockup): they must render, and the browser console must show no CORS errors.