Using draw.io in self-hosted offline Wikijs

[tfboy]

I'm struggling to find an answer regarding whether this is possible.
I have a running instance of Wiki.js in a environment with no Internet access.
Whilst draw.io is natively available in the markdown editor, I think it doesn't work as it relies on the public internet draw.io website.

As a potential alternative solution, I was looking at using Kroki (which I have integrated) and the early support for diagrams.net (the same thing as draw.io). I believe the idea is that the XML code of a draw.io / diagrams.net file can be inserted into the wiki markdown using the kroki plugin but I haven't been able to get this working.

My setup has Kroki working, I have pulled the diagrams_net docker image and have configured it in my yaml file. All other kroki drawing containers are working and able to embed images generated from the source code I put into the markdown. I have read yuzutech/kroki#405 and asked a few questions. I can embed a drawing as an image but need to have the drawing "encoded" into the Kroki format first, and my understanding was that the kroki plugin in Wikijs did all of this when using the correct markdown tagging.

So has anyone got this working? If so, any pointers?

Many thanks.

[nicloay]

Did you find the solution?

[tfboy]

Yes, in the end, I replicated drawio internally in another docker container and modified the source files to point to that instead of the online version. I can dig out the code and exact steps tomorrow

[nicloay]

Thanks for coming back. But I figured out that in my case, all was easier. I just didn't know that it works only in .md files. so when I converted the document to MD I was able to use draw.io on the page

[tfboy]

OK, here's the solution that I put in place that works for me. My Wiki is NOT running in a docker container, I decided to have it running on the actual OS. However, there are multiple modules which are docker-based, including Drawio which is documented below.

Getting this to work for me in my environment actually requires a few steps for it to work seamlessly, especially if you have your Wiki instance running in SSL...

Step 1 - Install/add the drawio to Docker
Open your docker-compose.yml file used to launch manage Wiki and add the "draw" section below:

version: "3"
services:
  draw:
    image: jgraph/drawio
    ports:
      - "8080:8080"
    restart: always
...

Restart docker and check that jgraph/drawio container is downloaded and starts OK. Check that it's listening on port 8080 (which we mapped in the docker-compose file previously) : note that I have several kroki plugins shown, you won't see these if you don't have them :)

$ docker ps
CONTAINER ID   IMAGE                       COMMAND                  CREATED        STATUS        PORTS                              NAMES
dfa8663faa41   yuzutech/kroki              "/bin/sh -c 'exec ja…"   17 hours ago   Up 17 hours   0.0.0.0:8000->8000/tcp             docker-kroki-1
cca4fdfe501d   yuzutech/kroki-excalidraw   "/usr/bin/excalidraw"    17 hours ago   Up 17 hours   8004/tcp                           docker-excalidraw-1
c6e74a490d06   yuzutech/kroki-blockdiag    "gunicorn --preload …"   17 hours ago   Up 17 hours   8001/tcp                           docker-blockdiag-1
768035faa566   jgraph/drawio               "/docker-entrypoint.…"   17 hours ago   Up 17 hours   0.0.0.0:8080->8080/tcp, 8443/tcp   docker-draw-1
509354f14867   yuzutech/kroki-mermaid      "/usr/bin/mermaid"       17 hours ago   Up 17 hours   8002/tcp                           docker-mermaid-1
53d41e2e876d   yuzutech/kroki-bpmn         "/usr/bin/bpmn"          17 hours ago   Up 17 hours   8003/tcp                           docker-bpmn-1

In my instance, I have Nginx running as a reverse proxy up front which acts as the SSL termination. So I have Nginx listening on port 443 with a valid certificate which then proxies Wiki on port 3000. The reason we added drawio and have it listening on port 8080 is so that we can have a secondary nginx configuration which responds to a virtualhost name we will create against which there is another valid SSL certificate. This is then proxied onto port 8080.

Step 2 - Create a new Nginx configuration file for the Drawio part
Create a new Nginx configuration file /etc/nginx/sites-available/drawio.conf with the following (adjust for your environmnet) :

server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        ssl_certificate /home/wikijs/drawio.crt;
        ssl_certificate_key /home/wikijs/drawio.key;
        ssl_session_timeout 1d;
        ssl_session_cache shared:MozSSL:10m;  # about 40000 sessions

        # DH parameters file
        ssl_dhparam /etc/nginx/dhparam.pem;

        # intermediate configuration
        ssl_protocols TLSv1.2;
        ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
        ssl_prefer_server_ciphers off;

        server_name drawio drawio.local;
        root /var/www/diagramsnet;

        # Proxy requests
        location / {
               proxy_pass              http://127.0.0.1:8080;
               proxy_http_version      1.1;
               proxy_set_header        Upgrade $http_upgrade;
               proxy_set_header        Connection "upgrade";
               proxy_set_header        Host $host;
               proxy_set_header        X-Real-IP $remote_addr;
               proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
               proxy_set_header        X-Forwarded-Proto $scheme;
       }
}

You will of course need a valid certificate and private key available in the locations mentioned in this config file.
The hostname you use needs to resolve to your Wiki's IP.
Create a link to make the site active : sudo ln -s /etc/nginx/sites-available/drawio.conf /etc/nginx/sites-enabled/drawio.conf

Step 3 - Modify Wiki.js source code to work with Drawio

Open the file /var/www/wikijs/assets/js/editor.js
In that file, search for https://embed.diagrams.net and replace it with your drawio URL https://drawio.local (or whichever name you have). It's in the very long line of code at the start - search and replace works best here!

Step 4 - Wipe your browser's cache
You might need to wipe your browser's cache so that when you load up a Wiki page, it uses the updated link we put in step 3 when you click on the add drawings button.

Note: If you're using SSL for your Wiki, you have to run drawio in SSL as well and all the certificates need to be valid to avoid strange errors.

[jacksitlab]

Thanks to your hints I was able to create a docker-compose file which does the trick automatically

services:
  wiki:
    image: wikijs-modified
    build:
      context: .
      dockerfile_inline: |
        FROM lscr.io/linuxserver/wikijs:2.5.306
        RUN sed -i 's|https://embed.diagrams.net|http://drawio.<your-basic-host>|' /app/wiki/assets/js/editor.js
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Europe/Berlin
    volumes:
      - ./config:/config
      - ./data:/data
    healthcheck:
      test: "curl --silent --insecure --fail http://localhost:3000 > /dev/null || exit 1"
      interval: 10s
      timeout: 10s
      retries: 45
    labels:
      - traefik.enable=true
      - traefik.http.routers.wiki.rule=Host(`wiki.<your-basic-host>`)
      - traefik.http.routers.wiki.entrypoints=web
      - traefik.http.services.wiki.loadbalancer.server.port=3000
      - traefik.docker.network=traefik-proxy
    networks:
      - traefik-proxy
  drawio:
    image: jgraph/drawio:26.0.9
    restart: always
    labels:
      - traefik.enable=true
      - traefik.http.routers.drawio.rule=Host(`drawio.<your-basic-host>`)
      - traefik.http.routers.drawio.entrypoints=web
      - traefik.http.services.drawio.loadbalancer.server.port=8080
      - traefik.docker.network=traefik-proxy
    networks:
      - traefik-proxy

networks:
  traefik-proxy:
    external: true

So you just have to replace <your-basic-host> with your hostname. Of course without traefik as a reverse proxy it is also possible just by using ip and port. With this it should be possible to simply upgrade wikijs without always re-editing the editor.js