I need to convert a .drawio file into a .png within a Docker container. My goal is to later automate this process in a GitLab CI pipeline and store the PNG as an artifact.

I have tried using the jgraph/drawio image, but it seems to only provide a web application instead of a CLI tool for conversion. Additionally, I have not found any suitable resources to perform the conversion inside a simple Ubuntu-based container.

How can I convert a .drawio file to .png inside a container? A solution using a lightweight approach would be appreciated.

Thanks :)

I need to convert a .drawio file into a .png within a Docker container. My goal is to later automate this process in a GitLab CI pipeline and store the PNG as an artifact.

I have tried using the jgraph/drawio image, but it seems to only provide a web application instead of a CLI tool for conversion. Additionally, I have not found any suitable resources to perform the conversion inside a simple Ubuntu-based container.

How can I convert a .drawio file to .png inside a container? A solution using a lightweight approach would be appreciated.

Thanks :)

• containers
• gitlab-ci
• diagrams

• In case you don't know, you can store the drawio source as part of the PNG when exporting from drawio. – Gaël J Commented Mar 22 at 12:39
• Are you only searching for a preexisting docker image? Or also for the right CLI command to convert the image? – Michael Kotzjan Commented Mar 25 at 7:26
• 1 Yeah I was looking for a Docker image as well as a suitable CLI command to convert the .drawio to a PNG. I found a solution and posted it, but if you have something better I'm open for suggestions. – eXor420 Commented Mar 25 at 10:27

1 Answer 1

I found a solution. It's not the most elegant one, but it works perfectly.

Using the Docker image accetto/ubuntu-vnc-xfce-drawio-g3, you get a container with Draw.io Desktop preinstalled. This allows you to use the Draw.io CLI inside the container.

To generate a PNG on Windows, you can use the following command: docker run --rm -v "%cd%:/workspace" accetto/ubuntu-vnc-xfce-drawio-g3 drawio -x -f png -o /workspace/erd.png /workspace/erd.drawio

For the briefly mentioned use case with GitLab CI, I also found a solution. Again, it's not the most elegant one.

Since the previously mentioned image couldn't be used as a base image, I had to use dind (Docker-in-Docker). Additionally, the command from above didn’t work, even when adapted for Linux. To work around this, I had to handle file mounting and extracting the generated file using docker cp. The following GitLab CI configuration demonstrates how to generate a PNG from a .drawio file:

convert_drawio_to_png:
    stage: convert
    image: docker:latest

    variables:
        DOCKER_HOST: "tcp://docker:2375"
        DOCKER_TLS_CERTDIR: ""
        DOCKER_BUILDKIT: "1"

    services:
        - name: docker:dind
          command: ["--storage-driver=overlay2"]

    script:
        - docker run -d --name drawio-container --privileged accetto/ubuntu-vnc-xfce-drawio-g3
        - docker cp ./erd.drawio drawio-container:/home/headless/
        - docker exec drawio-container sh -c "drawio -x -f png -o /home/headless/erd.png /home/headless/erd.drawio"
        - docker cp drawio-container:/home/headless/erd.png ./
        - docker stop drawio-container
        - docker rm drawio-container

    artifacts:
        paths:
            - erd.png

Since I haven't found an optimal solution myself, I'm open to better approaches and suggestions.