Skip to content
Klutch.sh Docs

Deploying a draw.io App

Introduction

Draw.io (diagrams.net) delivers a powerful, browser-based diagramming experience. This guide shows how to containerize draw.io with a Dockerfile, add optional branding, and deploy it to Klutch.sh over HTTP.

Prerequisites

  • GitHub repository containing your Dockerfile.
  • Klutch.sh project ready in klutch.sh/app.

Project structure

.
└── Dockerfile

Sample Dockerfile

FROM jgraph/drawio:latest


# Default draw.io port
ENV PORT=8080
EXPOSE 8080
  • PORT=8080 – internal port for the web UI.
  • DRAWIO_BASE_URL – public URL, e.g., https://example-app.klutch.sh (helps with embedded assets).
  • DRAWIO_DEFAULT_LANG=en – set a default language.
  • DRAWIO_OFFLINE=true – disable remote asset fetching if you prefer offline mode.

Persistence

Draw.io is stateless by default. If you customize and need to persist config, attach a volume:

  • Mount path: /var/lib/drawio
  • Size: minimal unless storing exports or custom assets

Networking

  • Protocol: HTTP
  • Internal port: 8080
  • Users reach https://example-app.klutch.sh while Klutch.sh routes to port 8080 inside the container.
Terminal window
curl -I http://localhost:8080

Deployment on Klutch.sh

  1. Push your Dockerfile to GitHub.
  2. In klutch.sh/app, create a new app and select GitHub as the source.
  3. Klutch.sh automatically detects the Dockerfile in the repository root.
  4. Select HTTP traffic and set the internal port to 8080.
  5. Add environment variables for PORT, DRAWIO_BASE_URL, and any branding/offline options.
  6. Optionally attach a persistent volume at /var/lib/drawio if you store custom assets.
  7. Deploy. After the app starts, open the URL to begin creating diagrams.

Verification

  • UI: open https://example-app.klutch.sh and confirm the draw.io editor loads.

  • Quick check:

    Terminal window
    curl -I https://example-app.klutch.sh

Next steps

  • Connect to cloud storage (Google Drive, OneDrive, etc.) from within the app if desired.
  • Restrict access via your edge controls if hosting internal diagrams.
  • Set up backups for any persistent path you add.