Draw and Map your Self Hosted Services using Excaladraw
You'll have a blast drawing your self-hosted diagram using the self-hosted and open source Excalidraw. Here's how I did it.
Back in March of 2023 I wrote an article highlighting an app called Excalidraw. Since then, I have been seeing quite a few people using it or recommending it for drawing diagrams.
Excaladraw is a great self-hosted and open source web tool for drawing diagrams and mapping out projects that you want to display comprehensive visuals of.
I'm going to create a simple diagram that shows my self-hosted services setup and explain how I did it using nothing more than Excalidraw and free icons from WalkxCode on Github.
Step 1. Install Excalidraw using Docker
What's awesome is Excalidraw is very easy to install. Two simple commands is all you need to get it up and running. Use the following commands on any LXC or VM to get Excalidraw up and running.
docker pull docker.io/excalidraw/excalidraw:latest
docker run -p 8080:80 -d docker.io/excalidraw/excalidraw:latestThis will pull the latest Excalidraw image and install it on your machine using Docker. Once it is finished just open your browser to the IP and port of the application.
To switch to dark mode, click the small hamburger icon in the upper left corner and click "Dark mode". From here we will start drawing using premade tools. Mostly rectangles and text tools.
Step 2. Read the "help" dialog box and keyboard shortcuts
Before we begin, it's important to note that no files will be saved on the server. All diagrams created are saved locally on the machine and in the browser cache. So get used to pressing Ctrl+S (using a Windows machine) when your cursor is targeting the Excalidraw canvas. This is a shortcut that will save files to your machine as .excalidraw files. These are like Photoshop PSD files. The file contains the raw contents of your project including layers, images and everything else. I will explain how to export as PNG later when the project is completed.
You should take a minute to look at the help section that covers a bunch more useful keyboard shortcuts that will help you drastically save time when creating projects in Excalidraw. Some of which I didn't even know existed until I started writing this article!
Step 3. Begin drawing using tools on the toolbar
I started with the rectangle tool. When you create shapes, you will notice the side panel open on the left side giving you options to change color, fill the shape, change the border and more.
From here, you can let your imagination run wild. I started with the basic server I have in my homelab and went from there. I wanted to display what the server is and how the Docker images are hosted and which applications are on that server.
When I was done, this is what I came up with. I created this diagram using nothing more than default tools in Excalidraw, icons and a couple images. I did google for an image of my Orbi RBR760 router. I just searched for "RBR760 PNG" and found one pretty easily. Same with my Unify switch and the internet icon at the top. All of the other application icons were found in the Github repo I linked above.
Step 4. Export your final Excalidraw project as a PNG
When you are finished, you can export the final project as an image or svg file.
For a transparent image like mine, I removed the background and chose dark mode. I then chose scale 3x so people can zoom in and view more details. Then just click 'PNG" and it will download the image to your machine.
Take it for a spin yourself on my self-hosted demo server here.
Final Notes and Thoughts
This was a fun project that made me feel good when it was done. Sure it's simple, but Excalidraw made this project much easier than trying to draw this all out by hand. And I just added the Grafana dashboard at the bottom just as a bonus visual.
If you want to learn more about Excalidraw or if you find it useful, be sure to swing by the Excalidraw Github repo and give it a star or consider singing up for Excalidraw+. For more details visit the Excalidraw website.
