Excalidraw on a VPS: Self-Hosted Collaborative Whiteboard for Diagrams and Sketches

Excalidraw on a VPS: Self-Hosted Collaborative Whiteboard for Diagrams and Sketches

Excalidraw is an open-source, virtual whiteboard with a distinctive hand-drawn aesthetic — widely used for architecture diagrams, wireframes, brainstorming, and technical sketches. The hosted version (excalidraw.com) supports real-time collaboration with end-to-end encryption. Self-hosting on a VPS provides complete control: your diagrams are never stored on excalidraw.com’s servers, you can integrate with internal authentication, and there’s no risk of the service being discontinued or paywalled.

Step 1: Docker Compose Setup

<code">mkdir -p /opt/excalidraw && cd /opt/excalidraw
nano docker-compose.yml
<code">version: '3.8'

services:
  excalidraw:
    image: excalidraw/excalidraw:latest
    container_name: excalidraw
    restart: always
    ports:
      - "127.0.0.1:3000:80"
    environment:
      REACT_APP_BACKEND_V2_GET_URL: https://excalidraw.yourdomain.com/api/v2/scenes/
      REACT_APP_BACKEND_V2_POST_URL: https://excalidraw.yourdomain.com/api/v2/scenes/
      REACT_APP_SOCKET_SERVER_URL: https://excalidraw.yourdomain.com

  # Storage backend for saving/loading scenes
  excalidraw-storage:
    image: excalidraw/excalidraw-storage-backend:latest
    container_name: excalidraw-storage
    restart: always
    ports:
      - "127.0.0.1:8080:8080"
    environment:
      STORAGE_URI: local
      STORAGE_LOCAL_DIR: /data
    volumes:
      - excalidraw_data:/data

volumes:
  excalidraw_data:
<code">docker compose up -d

Step 2: Nginx Reverse Proxy

<code">sudo nano /etc/nginx/sites-available/excalidraw
<code">server {
    listen 443 ssl http2;
    server_name draw.yourdomain.com;

    ssl_certificate /etc/letsencrypt/live/draw.yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/draw.yourdomain.com/privkey.pem;

    # WebSocket for real-time collaboration
    location /socket.io/ {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
    }

    # Storage API
    location /api/ {
        proxy_pass http://127.0.0.1:8080/;
        proxy_set_header Host $host;
    }

    # Main application
    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}
<code">sudo certbot --nginx -d draw.yourdomain.com
sudo ln -s /etc/nginx/sites-available/excalidraw /etc/nginx/sites-enabled/
sudo systemctl reload nginx

Step 3: Use Excalidraw

<code"># Open https://draw.yourdomain.com
# Start drawing immediately — no account required

# Keyboard shortcuts:
# V = select tool
# R = rectangle
# E = ellipse
# A = arrow
# T = text
# D = draw (freehand)
# P = pen
# Ctrl+Shift+F = fullscreen
# Ctrl+Z / Ctrl+Y = undo/redo

# Collaboration:
# Share → Live collaboration → Start session
# Anyone with the link can join and edit simultaneously
# Data is end-to-end encrypted in transit

# Export options:
# Export as PNG/SVG with transparent background
# Export as Excalidraw file (.excalidraw) for re-importing
# Copy to clipboard

Step 4: Libraries and Shapes

<code"># Excalidraw has a built-in shape library:
# Library icon (book) → Browse libraries → add AWS, GCP, Azure, 
# Kubernetes, network diagrams, flowchart shapes, wireframe kits

# Common use cases:
# - System architecture diagrams (cloud icons library)
# - Database schema sketches
# - API flow diagrams  
# - User journey wireframes
# - Technical interview whiteboard problems
# - Meeting brainstorming

# Mermaid diagram import:
# Insert → Mermaid → paste your mermaid code → converts to Excalidraw shapes

Getting Started

Excalidraw uses under 100 MB RAM — it runs on the smallest Ubuntu VPS at VPS.DO. The storage backend persists diagrams when sharing/saving links. For team environments where architecture diagrams, interview whiteboards, and technical sketches should stay internal (not uploaded to external services), self-hosted Excalidraw is ideal. The hand-drawn aesthetic makes diagrams feel approachable and non-final — encouraging iteration over perfectionism.

Conclusion

Self-hosted Excalidraw provides a private collaborative whiteboard with real-time multi-user editing and end-to-end encrypted sharing — diagrams are encrypted before being stored, so even your VPS cannot read them. For engineering teams that sketch architecture daily, Excalidraw’s hand-drawn aesthetic and intuitive toolset make it the go-to whiteboarding tool. Self-hosting ensures business-sensitive architecture diagrams and technical designs remain within your infrastructure.

Post Your Comment

Fast • Reliable • Affordable VPS - DO It Now!

Get top VPS hosting with VPS.DO’s fast, low-cost plans. Try risk-free with our 7-day no-questions-asked refund and start today!