Excalidraw Whiteboard: Ultimate Docker Self-hosted Home lab Diagramming

 

As the popularity of home labs and self-hosted environments grows, enthusiasts and developers need efficient tools to visualize their infrastructure. Excalidraw Whiteboard is a great solution that offers a hand-drawn feel to your diagrams. I have been using Visio for years and Lucidchart, most recently as an online diagramming solution.

However, after discovering Excalidraw (thanks @christianlempa), I am blown away by this solution’s cool look, feel, and community support. It is an open-source virtual whiteboard for sketching that provides real-time collaboration and makes it easy to create beautiful hand-drawn diagrams for your home lab projects.

What is Excalidraw?

We have already mentioned at the outset, Excalidraw is a free, open-source, browser-based sketching tool. It allows for sketching hand-drawn diagrams. Designed with simplicity, this app offers a wide range of tools and libraries to help users visualize their ideas and data efficiently.

The virtual whiteboard even provides a workspace for live collaboration, enabling real-time interaction with colleagues and fellow home lab enthusiasts.

Excalidraw Editor

The Excalidraw editor is a user-friendly interface that offers numerous features and tools to create hand-drawn feel diagrams. With the editor, users can draw diagrams, import images, and save their work as Excalidraw files for future use.

Docker Integration with Excalidraw Whiteboard

Integrating Docker into your home lab setup is essential for managing containerized applications and services. Excalidraw Whiteboard offers a simple way to visualize Docker-based infrastructure for your self-hosted projects.

Using Excalidraw to draw diagrams, users can efficiently map out their Docker environments, container relationships, and how data flows within the system. I love the look of the hand-drawn diagrams that are crisp and stunning, especially in dark mode.

Excalidraw Libraries and Templates

One of the standout features of Excalidraw is the vast selection of libraries available to users. These libraries contain pre-built shapes, icons, and elements that cater to various categories, such as networking, computing, storage, and more. One of the awesome things I really like about the libraries is how seamless they are to integrate with the solution.

Gone are the days of downloading a Visio template pack, installing it in your Visio folder, and searching for the shapes. With Excalidraw, they have made integrating libraries a cinch.

These libraries make creating diagrams for Docker-based home lab setups, virtualization environments, and others much easier, ensuring consistency and clarity in your visualizations.

Navigate to the Library in the upper right-hand corner.

You can then select the Browse Libraries button.

Here, you can search for the type of library you are looking for. Once you see the library you want, you can simply click Add to Excalidraw to immediately add it to your web session to be stored in your browser.

Live Collaboration with Excalidraw Whiteboard

Excalidraw Whiteboard (online, not self-hosted solution) supports real-time collaboration, allowing multiple users to simultaneously work on a single diagram.

This feature is invaluable for home lab enthusiasts and developers working on self-hosted projects, as it enables them to share ideas, provide feedback, and iterate on designs quickly and efficiently.

Accessing Excalidraw Files and Sharing Your Work

With Excalidraw Whiteboard, users can save their diagrams as Excalidraw files, making it easy to access and modify their work in the future.

Furthermore, diagrams can be exported in various formats, such as SVG or PNG, enabling users to share their creations with others or incorporate them into documentation.

Excalidraw in Action: Example Docker-based Home Lab Diagram

Let’s walk through a simple example to showcase how Excalidraw Whiteboard can be used to create Docker-based home lab diagrams. In this scenario, a user wants to map out their self-hosted environment, including a web server, database server, and load balancer, all running as Docker containers.

1. First, the user launches the Excalidraw editor in their browser and selects the appropriate library containing Docker-related shapes and icons.

2. The user then drags and drops the necessary elements onto the virtual whiteboard, representing the web server, database server, and load balancer containers.

3. Using the drawing tools provided, the user connects the elements to represent the relationships between the containers and how data flows within the system.

4. Once the diagram is complete, the user saves it as an Excalidraw file for future reference or exports it as an image to share with others.

Below is a quick diagram with a few of the shapes from the community library.

Self-Hosting Excalidraw Client in a Docker Container

One of the significant advantages of using Excalidraw Whiteboard is the ability to self-host the Excalidraw client in your own Docker container. By self-hosting, you gain more control over your data, privacy, and customizability, making it an ideal solution for home lab enthusiasts and developers.

Setting up Excalidraw in Docker

To self-host Excalidraw client in a Docker container, follow these simple steps:

1. Install Docker: First, ensure that Docker is installed and running on your home lab environment. You can download and install Docker from the official website if you haven’t already.

2. Get the Excalidraw Docker Image: Excalidraw provides an official Docker image that you can use to set up a self-hosted instance. Pull the latest Excalidraw Docker image from the Docker Hub using the following command:

   docker pull excalidraw/excalidraw:latest

3. Run Excalidraw Docker Container: Once you have the Excalidraw image, you can run a new Docker container using the following command:

   docker run -d -p 8080:80 --name my-excalidraw-instance excalidraw/excalidraw:latest

   This command will create and run a new Excalidraw container, mapping port 80 inside the container to port 8080 on your host machine. You can replace “8080” with your desired port number.

1. Access the Self-Hosted Excalidraw Client: After the container is running, you can access the self-hosted Excalidraw client by navigating to http://localhost:8080 (or your chosen port) in your web browser.

Setting up Excalidraw with Docker Compose

You can use the following Docker Compose code to setup Excalidraw. Create a docker-compose.yml file with the following contents:

version: '3.3'

services:
  excalidraw:
    image: excalidraw/excalidraw:latest
    restart: always
    ports:
      - 80:80
    container_name: excalidraw

You can easily combine this with a reverse proxy like Traefik to connect using a secure connection. You can do that with example code that looks something like this:

version: '3.3'

services:
  traefik2:
    image: traefik:latest
    restart: always
    command:
      - "--log.level=DEBUG"
      - "--api.insecure=true"
      - "--providers.docker=true"
      - "--providers.docker.exposedbydefault=true"
      - "--entrypoints.web.address=:80"
      - "--entrypoints.websecure.address=:443"
      - "--entrypoints.web.http.redirections.entryPoint.to=websecure"
      - "--entrypoints.web.http.redirections.entryPoint.scheme=https"
    ports:
      - 80:80
      - 443:443
    networks:
      traefik:        
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    container_name: traefik

  excalidraw:
    image: excalidraw/excalidraw:latest
    restart: always
    networks:
      traefik:
    environment:
      - LOG_LEVEL=debug
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.excalidraw.tls=true"
      - "traefik.http.routers.excalidraw.rule=Host(`excalidraw.cloud.local`)"
      - "traefik.http.routers.excalidraw.entrypoints=websecure"
      - "traefik.http.services.excalidraw.loadbalancer.server.port=80"
    container_name: excalidraw

networks:
  traefik:
    driver: bridge
    name: traefik
    ipam:
      driver: default
      config:
        - subnet: 172.19.0.0/16

Once you have your docker-compose.yml file created, simply issue the command:

docker-compose up -d

Customizing Your Excalidraw Instance

By self-hosting Excalidraw, you can customize various aspects of the application to suit your needs. For instance, you can modify the app’s source code to add new features, make changes to the UI, or enhance the existing functionality. Additionally, you can integrate Excalidraw with other tools and services in your home lab setup to create a seamless workflow.

You can check out the source code here: GitHub – excalidraw/excalidraw: Virtual whiteboard for sketching hand-drawn like diagrams

Updating Your Excalidraw Docker Container

To keep your self-hosted Excalidraw client up-to-date, periodically update the Docker image and recreate the container. Follow these steps:

1. Pull the latest Excalidraw Docker image:

   docker pull excalidraw/excalidraw:latest

2. Stop and remove the existing Excalidraw container:

   docker stop my-excalidraw-instance docker rm my-excalidraw-instance

3. Create and run a new container with the updated image:

   docker run -d -p 8080:80 --name my-excalidraw-instance excalidraw/excalidraw:latest

By self-hosting the Excalidraw client in a Docker container, you can enjoy greater control and customization while maintaining this powerful diagramming tool’s core functionality and ease-of-use.

Future Developments and Support for Excalidraw

As the Excalidraw project evolves, more features and enhancements can be expected. The open-source nature of the app means that developers and users alike can contribute to its growth, providing ideas and code for new features, libraries, and optimizations. One of the most exciting aspects of open-source solutions to me is the nature in which open-source platforms can quickly evolve and become more powerful!

Expanding Your Excalidraw Experience

Beyond Docker-based home lab diagramming, Excalidraw Whiteboard can be used across various industries and companies for many purposes. Its hand-drawn feel and ease of use make it an excellent choice for brainstorming, planning, and organizing ideas in any context. With the growing number of libraries and tools available, the possibilities for using Excalidraw in your projects are endless.

Wrapping up

Excalidraw Whiteboard offers a simple yet powerful solution for creating hand-drawn like diagrams in Docker-based home lab environments. Home lab enthusiasts can effectively visualize their self-hosted infrastructure and projects by leveraging its extensive libraries, collaboration features, and user-friendly interface.

With my future home lab drawings and diagrams, I plan to use Excalidraw for further documentation of home lab logical drawings, etc. It’s definitely an awesome tool that I can see myself using more and more.