Draw.io Diagram Editor

Key Features

• Extensive diagram template library including AWS, Azure, GCP cloud architecture symbols, network equipment icons, and business process notation
• Real-time collaborative editing with conflict resolution and change tracking for team-based diagram development
• Native export capabilities to PNG, JPEG, SVG, PDF, VSDX, and XML formats with configurable quality and size options
• Direct integration with GitHub, GitLab, Google Drive, OneDrive, and Dropbox for diagram storage and version control
• Advanced shape libraries with custom shape creation, connector routing algorithms, and automatic layout suggestions
• NGINX-powered static asset caching and compression reducing load times for diagram libraries and interface elements
• Dual-port architecture supporting both HTTP (8080) and HTTPS (8443) connections with NGINX SSL termination
• Plugin architecture supporting custom stencils, mathematical formula rendering via MathJax, and third-party integrations

Common Use Cases

• 1Software development teams creating UML diagrams, database schemas, and API documentation within air-gapped or private cloud environments
• 2Network administrators designing and documenting network topologies, rack layouts, and infrastructure diagrams for compliance audits
• 3Business analysts developing process flow diagrams, organizational charts, and workflow documentation for internal stakeholders
• 4Educational institutions providing students access to professional diagramming tools without per-seat licensing costs
• 5Healthcare organizations creating HIPAA-compliant workflow diagrams and process documentation on private infrastructure
• 6Manufacturing companies documenting production processes, quality control workflows, and equipment maintenance procedures
• 7Consulting firms maintaining client confidentiality while creating architectural diagrams and strategic planning visualizations

Prerequisites

• Docker Engine 20.10+ and Docker Compose V2 with minimum 512MB available RAM for Draw.io container operations
• Network ports 80, 443, 8080, and 8443 available on the host system without conflicts from existing services
• Basic understanding of NGINX configuration for SSL certificate installation and reverse proxy customization
• Approximately 2GB disk space for Docker images and diagram storage, with additional space for user-generated content
• Modern web browser with JavaScript enabled and WebGL support for advanced diagram rendering features
• Understanding of Docker networking concepts for troubleshooting inter-container communication issues

docker-compose.yml

1services: 
2  drawio: 
3    image: jgraph/drawio:latest
4    ports: 
5      - "8080:8080"
6      - "8443:8443"
7    networks: 
8      - drawio-net
9    restart: unless-stopped
10
11  nginx: 
12    image: nginx:alpine
13    ports: 
14      - "80:80"
15      - "443:443"
16    volumes: 
17      - ./nginx.conf:/etc/nginx/nginx.conf:ro
18    depends_on: 
19      - drawio
20    networks: 
21      - drawio-net
22    restart: unless-stopped
23
24networks: 
25  drawio-net: 
26    driver: bridge

.env Template

1# Draw.io Configuration
2# No configuration needed

Usage Notes

Individual Services(2 services)

Copy individual services to mix and match with your existing compose files.

drawio:
  image: jgraph/drawio:latest
  ports:
    - "8080:8080"
    - "8443:8443"
  networks:
    - drawio-net
  restart: unless-stopped

nginx:
  image: nginx:alpine
  ports:
    - "80:80"
    - "443:443"
  volumes:
    - ./nginx.conf:/etc/nginx/nginx.conf:ro
  depends_on:
    - drawio
  networks:
    - drawio-net
  restart: unless-stopped

Quick Start

1# 1. Create the compose file
2cat > docker-compose.yml << 'EOF'
3services:
4  drawio:
5    image: jgraph/drawio:latest
6    ports:
7      - "8080:8080"
8      - "8443:8443"
9    networks:
10      - drawio-net
11    restart: unless-stopped
12
13  nginx:
14    image: nginx:alpine
15    ports:
16      - "80:80"
17      - "443:443"
18    volumes:
19      - ./nginx.conf:/etc/nginx/nginx.conf:ro
20    depends_on:
21      - drawio
22    networks:
23      - drawio-net
24    restart: unless-stopped
25
26networks:
27  drawio-net:
28    driver: bridge
29EOF
30
31# 2. Create the .env file
32cat > .env << 'EOF'
33# Draw.io Configuration
34# No configuration needed
35EOF
36
37# 3. Start the services
38docker compose up -d
39
40# 4. View logs
41docker compose logs -f

One-Liner

Run this command to download and set up the recipe in one step:

1curl -fsSL https://docker.recipes/api/recipes/drawio-diagrams/run | bash

Troubleshooting