Self-Host draw.io (diagrams.net): Powerful Diagramming Behind Your Firewall

Overview

draw.io—now branded as diagrams.net—is an open-source diagramming application used for architecture diagrams, network topologies, UML, BPMN, and whiteboarding. Self-hosting the full stack gives you total control over data residency, unlocks intranet-only workflows, and lets you integrate with on-prem storage like Nextcloud, MinIO, or Git repositories.

Why Self-Host draw.io?

• Data Sovereignty: Keep architecture diagrams, SOC evidence, and incident response docs in your own storage.
• Enterprise Integration: Embed the editor in Confluence Server, GitLab, SharePoint, or static docs portals via iframe/OAuth.
• Offline Access: Offer local editing for air-gapped teams (manufacturing, defense, healthcare).
• Customization: Build custom shape libraries, templates, and automation that follow your brand guidelines.

Feature Highlights

🎨 Diagram Library

• 1000+ built-in shapes plus custom libraries stored in Git repos.
• Drag-and-drop connectors with auto routing, swimlanes, and grouped components.
• Smart templates for AWS, Azure, GCP, Kubernetes, Cisco, BPMN, and ER diagrams.

🤝 Collaboration & Versioning

• Realtime collaboration via WebRTC or Firestore adapter.
• Built-in change tracking, diagram history, and comments.
• Integrations with Atlassian Confluence, Jira, GitHub, GitLab, and Nextcloud.

🔐 Security

• Self-hosted identity (Keycloak, Authentik, Azure AD) using OAuth2/OpenID Connect.
• Enforce content policies: disable external URLs, restrict exports, watermark diagrams.
• Sandboxed plugin execution to avoid malicious macros.

Deployment Options

Docker Compose (Quick Start)

version: '3.8'
services:
  drawio:
    image: jgraph/drawio:24.7.5
    container_name: drawio
    restart: unless-stopped
    environment:
      - DRAWIO_ENABLE_FRONTEND_CONFIG=true
      - DRAWIO_CONFIG=/config/config.js
      - DRAWIO_BASE_URL=https://draw.example.com
    ports:
      - "8081:8080"
    volumes:
      - ./config:/config
      - ./data:/var/lib/drawio

  proxy:
    image: caddy:2
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./Caddyfile:/etc/caddy/Caddyfile
      - caddy-data:/data
      - caddy-config:/config

volumes:
  caddy-data:
  caddy-config:

1. Place custom settings in config/config.js.
2. docker compose up -d
3. Visit https://draw.example.com.

Kubernetes

helm repo add diagrams https://jgraph.github.io/helm-charts
helm install drawio diagrams/drawio \
  --set ingress.hosts[0].host=draw.example.com \
  --set ingress.tls[0].hosts[0]=draw.example.com \
  --set persistence.enabled=true \
  --set persistence.size=20Gi

• Bring your own PostgreSQL/MinIO if you want persistent libraries or backups.
• Use Horizontal Pod Autoscaler to scale with team size.

Integrating Storage Providers

Customization

• Branding: Override CSS/JS via /config volume to add logos or dark themes.
• Shape Libraries: Host JSON libraries in Git and load them automatically for all users.
• Keyboard Shortcuts: Modify app.min.js or supply .json config to match Lucidchart/Visio layouts.
• Automation: Use the REST export API to render PNG/SVG/PDF versions for CI pipelines.

Performance & Scaling Tips

• Enable CDN caching for static assets (Cloudflare, Fastly) while keeping editor API private.
• Run behind Traefik or Nginx with gzip + brotli compression for faster initial load.
• Turn on collaborative editing only for teams that need it to reduce Firebase/WebRTC load.
• Persist /var/lib/drawio on SSD-backed volumes (NVMe) for heavy exports.

Backup Strategy

• Schedule nightly backups of /var/lib/drawio (libraries, configs) and config.js.
• Export team shape libraries as JSON and store them in Git for DR.
• Track diagram files in Git or object storage so they can be restored even if the panel is rebuilt.

draw.io vs Alternatives

Use draw.io when you need Visio-level diagramming with minimal client friction and total control over where files live.

Common Issues

• Blank page after login: Check CSP headers—allow script-src 'self' 'unsafe-eval' for the editor bundle.
• File saves fail: Validate storage adapters (e.g., Nextcloud WebDAV credentials) and ensure CORS allows PUT/DELETE.
• Fonts missing: Mount custom fonts in /usr/share/fonts and rebuild the container or use CSS @font-face.
• Large exports time out: Increase MAX_EXPORT_SIZE env var and use worker pods for heavy conversions.

Next Steps

• Add SSO with Authentik or Keycloak for central access control.
• Attach Prometheus metrics (via sidecar) to monitor response times and export queue.
• Publish pre-built templates (Architecture review, Incident timeline) to accelerate onboarding.

Self-hosted draw.io keeps your architecture knowledge base in your control while delivering a polished, familiar UX to every stakeholder.