docker.recipes

Excalidraw Whiteboard

beginner

Virtual whiteboard for sketching diagrams with hand-drawn style and real-time collaboration.

Overview

Excalidraw is an open-source virtual whiteboard application that creates diagrams and sketches with a distinctive hand-drawn aesthetic. Developed to bridge the gap between formal diagramming tools and natural sketching, Excalidraw enables users to create flowcharts, wireframes, system architecture diagrams, and brainstorming visuals that maintain a human, approachable feel. The tool gained popularity for its simplicity, collaborative features, and ability to export diagrams in multiple formats while keeping the creative process intuitive and distraction-free. This Docker deployment combines Excalidraw with NGINX to create a robust, production-ready whiteboarding platform. The NGINX reverse proxy handles SSL termination, static asset optimization, and request routing, while providing essential web server capabilities that enhance Excalidraw's performance and security. This architecture enables organizations to host their own Excalidraw instance with proper caching, compression, and traffic management that the standalone Excalidraw container lacks. Teams requiring private, self-hosted collaborative whiteboarding will find this stack invaluable for maintaining data sovereignty while providing familiar diagramming capabilities. Engineering teams, design agencies, educational institutions, and remote-first organizations benefit from having a controlled environment for visual collaboration without relying on external SaaS platforms or compromising sensitive project information through third-party services.

Key Features

  • Hand-drawn aesthetic rendering engine that transforms geometric shapes into natural-looking sketches
  • Real-time multiplayer collaboration with cursor tracking and live drawing synchronization
  • Multi-format export capabilities supporting PNG, SVG, JSON, and clipboard integration
  • NGINX-powered static asset caching and gzip compression for faster diagram loading
  • WebSocket proxying through NGINX for stable real-time collaboration connections
  • Local storage persistence for diagrams with optional cloud backup integration
  • Touch and stylus support for tablet-based drawing with pressure sensitivity
  • Component library system for reusable diagram elements and templates

Common Use Cases

  • 1Software architecture planning sessions with distributed development teams requiring real-time visual collaboration
  • 2Educational institutions hosting virtual whiteboard sessions for mathematics, engineering, and design courses
  • 3Design agencies creating wireframes and user journey maps while maintaining client data privacy
  • 4Remote team retrospectives and brainstorming sessions with persistent diagram storage
  • 5Engineering documentation creation for system diagrams that need regular updates and version control
  • 6Healthcare organizations sketching patient care workflows while maintaining HIPAA compliance through self-hosting
  • 7Startup pitch deck creation and investor presentation diagrams with collaborative editing capabilities

Prerequisites

  • Docker Engine 20.10+ and Docker Compose V2 for container orchestration support
  • Minimum 512MB RAM allocation for concurrent multi-user drawing sessions and NGINX caching
  • Available ports 80 and 443 for HTTP/HTTPS traffic, plus port 3000 for direct Excalidraw access
  • SSL certificate files if enabling HTTPS through NGINX for production deployments
  • Basic understanding of NGINX configuration for customizing proxy settings and performance tuning
  • Network firewall configuration allowing WebSocket connections for real-time collaboration features

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  excalidraw: 
3    image: excalidraw/excalidraw:latest
4    ports: 
5      - "3000:80"
6    networks: 
7      - excalidraw-net
8    restart: unless-stopped
9
10  nginx: 
11    image: nginx:alpine
12    ports: 
13      - "80:80"
14      - "443:443"
15    volumes: 
16      - ./nginx.conf:/etc/nginx/nginx.conf:ro
17    depends_on: 
18      - excalidraw
19    networks: 
20      - excalidraw-net
21    restart: unless-stopped
22
23networks: 
24  excalidraw-net: 
25    driver: bridge

.env Template

.env
1# Excalidraw Configuration
2# No configuration needed

Usage Notes

  1. 1Whiteboard at http://localhost:3000
  2. 2Hand-drawn style diagrams
  3. 3Export to PNG, SVG, or JSON
  4. 4Real-time collaboration with link sharing

Individual Services(2 services)

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

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

Quick Start

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

Troubleshooting

  • Collaboration features not working: Verify WebSocket connections aren't blocked by checking browser network tab and ensuring NGINX proxy_pass includes WebSocket upgrade headers
  • Diagrams loading slowly or timing out: Increase NGINX proxy_read_timeout and proxy_connect_timeout values in nginx.conf to handle large diagram files
  • Export functionality failing with large diagrams: Configure NGINX client_max_body_size to accommodate SVG/PNG export file sizes, typically 10M or higher
  • Real-time cursor tracking delayed: Check NGINX error logs for WebSocket proxy errors and ensure proxy_buffering is disabled for WebSocket routes
  • Excalidraw container crashing on startup: Verify the excalidraw/excalidraw:latest image pulled successfully and check container logs for Node.js memory allocation errors
  • NGINX returning 502 Bad Gateway: Confirm Excalidraw service is healthy on port 3000 and Docker network connectivity between nginx and excalidraw containers

Community Notes

Loading...
Loading notes...

Download Recipe Kit

Get all files in a ready-to-deploy package

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

Components

excalidrawnginx

Tags

#excalidraw#whiteboard#diagrams#collaboration#drawing

Category

Productivity & Collaboration

Related Recipes

Ad Space