Draw.io Diagram Editor

beginner

Professional diagramming tool supporting flowcharts, UML, network diagrams, and more.

[i]Overview

Draw.io (now known as diagrams.net) is a free, open-source diagramming application originally developed by JGraph Ltd. It provides a comprehensive web-based interface for creating professional diagrams including flowcharts, UML diagrams, network topologies, organizational charts, mockups, and technical schematics. The tool gained popularity for offering enterprise-grade diagramming capabilities without licensing costs, supporting both online and offline usage with integrations to major cloud storage providers. This Docker stack combines the jgraph/drawio container with NGINX as a reverse proxy to create a self-hosted diagramming solution. NGINX handles SSL termination, static asset delivery, and provides additional security layers while Draw.io serves the core diagramming functionality on ports 8080 and 8443. This architecture enables organizations to maintain complete control over their diagramming data while providing users with a familiar, browser-based interface that rivals commercial solutions like Visio or Lucidchart. This configuration is ideal for teams requiring data sovereignty, organizations with compliance requirements preventing cloud tool usage, or development teams wanting integrated diagramming capabilities within their private infrastructure. The combination provides enterprise-grade diagramming with the reliability of NGINX's battle-tested web serving capabilities, making it suitable for both small development teams and large-scale organizational deployments.

[*]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

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

[!]

WARNING: For development & testing. Review security settings, change default credentials, and test thoroughly before production use. See Terms

[$]docker-compose.yml

[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

[.env]

1# Draw.io Configuration
2# No configuration needed

[i]Usage Notes

[1]Editor at http://localhost:8080
[2]Supports many diagram types
[3]Export to many formats
[4]Integration with cloud storage

Individual Services(2 services)

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

drawio

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

nginx

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

[terminal]

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:

[terminal]

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

[?]Troubleshooting

[!]Draw.io interface loads but diagrams don't save: Verify the drawio container has write permissions and sufficient disk space in its working directory
[!]502 Bad Gateway from NGINX: Check that the drawio container is running and accessible on port 8080 using 'docker exec nginx curl drawio:8080'
[!]Collaborative editing features not working: Ensure WebSocket connections can pass through NGINX by adding 'proxy_http_version 1.1' and WebSocket upgrade headers
[!]Export functions timeout or fail: Increase NGINX proxy timeouts in configuration and verify the drawio container has adequate memory allocation
[!]Custom fonts not displaying in diagrams: Mount a fonts directory to the drawio container and ensure font files are in supported formats (TTF, WOFF)
[!]Cloud storage integrations fail to authenticate: Check that the drawio container can reach external OAuth endpoints and verify firewall rules allow outbound HTTPS

Community Notes

Loading notes...

## Download Recipe Kit

Get all files in a ready-to-deploy package

Includes docker-compose.yml, .env template, README, and license

## Components

drawionginx

## Tags

#drawio#diagrams#flowcharts#uml#editor

## Category

Productivity & Collaboration

## Related

Shortcuts: C CopyF FavoriteD Download