How to integrate a self-hosted Draw.io instance?

[therealschosch]

How to integrate a self-hosted Draw.io instance? (Hardcoded embed.diagrams.net?)

Hello everyone,
I am currently setting up OpenCloud and want to replace the default external Draw.io instance (embed.diagrams.net) with my own self-hosted Draw.io instance to ensure strict data privacy. My goal is to force the OpenCloud frontend to load the Draw.io iFrame from my local instance (drawio.example.net) instead of the public one.

Architecture Overview
My environment consists of separate Docker containers behind a Caddy reverse proxy:

+-------------------------------------------------------------+
|                       User Browser                          |
+-----------------------------+-------------------------------+
                              | HTTPS
+-----------------------------v-------------------------------+
|                  Caddy (Reverse Proxy)                      |
+---------+-------------------+-------------------+-----------+
          |                   |                   |
    auth.example.net    cloud.example.net   drawio.example.net
          |                   |                   |
+---------v-------+   +-------v-------+   +-------v-------+
|                 |   |               |   |               |
|    Authelia     |   |   OpenCloud   |   |    Draw.io    |
|   (Container)   |   |  (Container)  |   |  (Container)  |
|                 |   |               |   |               |
+-----------------+   +---------------+   +---------------+

What I have tried so far (and failed)
I spent quite some time trying to override the default URL via configuration files, but the frontend module seems to ignore all of them:

1. external_apps block: Mounted a custom config.json via Docker and added the Draw.io app to the external_apps array, providing url, baseUrl, and editorUrl parameters pointing to https://drawio.example.net.
2. editor block: Tried configuring the URL using the "editor": { "drawio": { "url": "..." } } JSON structure.
3. Environment Variables: Forced OpenCloud to use the mounted config by setting the - WEB_CONFIG=/etc/opencloud/config.json environment variable in docker-compose.yml.

The Result:
Checking the browser's network tab confirms that the custom config.json is successfully delivered to the client. However, the Draw.io frontend module (/assets/apps/drawio/js/remoteEntry-*.mjs) completely ignores the provided URLs. The rendered iFrame still hardcodes src="https://embed.diagrams.net?...".

My Question
Is the embed.diagrams.net URL currently hardcoded in the frontend build, or is there a specific, update-safe way (via config.json or docker environment variables) to override the Draw.io URL? How is this correctly done in OpenCloud?

KR
trs

[JammingBen]

The cleanest way to configure web-extensions such as the draw.io one is to use a global apps.yaml file as described here: https://docs.opencloud.eu/docs/next/dev/server/services/web/information#application-configuration

You can then specify the url like so:

draw-io:
  config:
    url: '<your-url>'

Remember that you also need to update your csp file by including your URL in frame-src.

[therealschosch]

Hi Jannik,

thanks for your reply - I am still struggling to get it to work.

I also found your Readme for the extension package web-app-draw-io: https://github.com/opencloud-eu/web-extensions/blob/main/packages/web-app-draw-io/README.md

My aim is to load a locally hosted draw-io instance, which is accessable through drawio.mydomain.net and thereby replace the default url embed.diagrams.net.

My configuration
local install of the drawio extension:
root@mymachine:/opt/opencloud/data/web/assets/apps/drawio/js# ls dist-CXnzN4cY.mjs localSharedImportMap-DQn7mzgz.mjs draw-io-ihV_YH40.mjs preload-helper-DYl5dUZ5.mjs draw_mf_2_io__loadShare___mf_0_opencloud_mf_2_eu_mf_1_web_mf_2_client__loadShare__.mjs-DMjw8_v-.mjs remoteEntry-DcvZc95b.mjs draw_mf_2_io__loadShare___mf_0_opencloud_mf_2_eu_mf_1_web_mf_2_pkg__loadShare__.mjs-DLIQVbFI.mjs src-BjY7QnBW.mjs draw_mf_2_io__loadShare__vue3_mf_2_gettext__loadShare__.mjs--yg0vo1u.mjs src-ihV_YH40.mjs draw_mf_2_io__loadShare__vue__loadShare__.mjs-BIEBZmR8.mjs virtualExposes-C9v_P3Kl.mjs hostInit-CGV-6mMJ.mjs

I have a /opt/opencloud/config/csp.yaml file:

directives:
frame-src:
- "'self'"
- 'https://drawio.mydomain.net/'

and a /opt/opencloud/config/apps.yaml file:

draw-io:
config:
url: 'https://drawio.mydomain.net'
theme: 'minimal'

The container recreates without an error.

Inspecting the Browsers iFrame source for an opend draw-io document:

<iframe id="drawio-editor" src="https://embed.diagrams.net?embed=1&chrome=1&picker=0&stealth=1&spin=1&proto=json&ui=minimal" title="Draw.io Editor" class="app-wrapper-content size-full" url="" space="[object Object]" activefiles="[object Object]" currentfilecontext="[object Object]" isfolderloading="false" loadfolderforfilecontext="async t=>{n.value=!0;try{if(t=I(t),I(u)?.term)

.....

</iframe>

I think the "link" is missing between draw-io and die csp.yaml. Where does OC (or the Browser) know from that it should override embed.diagrams.net with drawio.mydomain.net?

Any hint welcome ;-)

[JammingBen]

First thing I'd check is if the config is read properly. You should see a request to <your-cloud>/config.json in the browser network tab, referencing the draw-io extension in external_apps. This should also include your config with the url set to https://drawio.mydomain.net/. If that's the case, I assume it's actually a bug in the extension.