First impressions of Excalidraw

A few weeks ago, I stumbled upon Excalidraw, which is a whiteboarding/diagramming tool that has a certain aesthetic. I liked the design of the diagrams I saw, so I decided to give it a try. Coming from drawio, I was immediately impressed with how intuitive it felt. After playing around with Excalidraw for an hour, I decided it was worth actually using for work, and so I hosted it locally on my machine. The setup was pretty easy to do; clone the repository, install the alarmingly many dependencies¹, build the app, and then grab the static files from excalidraw-app/build and shove them behind a web server.

git clone https://github.com/excalidraw/excalidraw.git
cd excalidraw
yarn
yarn build:app
cd excalidraw-app/build
python -m http.server

Other than using Excalidraw at work, I also created some simple diagrams for this site’s colophon.

Getting used to the tool was no problem; the shortcuts were easy to pick up since they’re subtly labelled on each icon, and navigating and drawing were easy to do as well.

A feature I particularly liked was ‘frames’, which allow you to group and label a collection of elements together. You can also save a frame as an image once selected.

The labels on icons and frames can be searched, allowing you to jump across different parts of the diagram. I use this to jump to specific components during a presentation, which brings me to a feature of drawio I miss, the layers. The ability to create layers made it slightly easier to overlap elements without having to send an icon forward or back multiple times, but what I used it for most was to progressively reveal components of a diagram during a presentation. I’d start with one component of the overall system design visible and slowly unhide layers to reveal more as the meeting or presentation progressed. Without the layers feature in Excalidraw, I will have to change my presentation workflow. I still haven’t been able to find an alternative yet.

Going back to the aesthetic of Excalidarw, the diagrams have a hand-drawn look which can be off-putting for professional documents, but for day-to-day whiteboarding it works great. You can also switch the lines and font to not be sloppy, solving that issue.

The next one is both a plus and a minus for me. The icon packs. With drawio there are a lot of pre-existing libraries you can use to import product icons and other components. Excalidraw doesn’t have that, at least not in the traditional sense. The official list of libraries has a few to pick from, which, if you notice, have the same look-and-feel as the diagrams created within Excalidraw. This is part of its strength and weakness for me. To create a library, you need to draw the icons in Excalidraw, unlike with drawio where you can bring in SVGs, you can include images in Excalidraw, just not in a library. This forces you or other users to create these icons within Excalidraw so they all have the same aesthetic. This means everything is actually really uniform, so it’s a plus; however, this also limits the libraries currently available.

It’s not a big issue since I’ve slowly started creating my icons as I need them. Last week I published my first library, which are all the AWS Backup resource icons. By published I mean sent for review, which created a GitHub pull request. At the time of writing this, there are over 900 open PRs! I was surprised how easy it was to ‘publish’ via the tool, and you’ll notice in the list of PRs there are many people who have accidentally published icons. So the maintainers have their work cut out for them, sifting through the submissions, thus feeding the previous issue of there not being many libraries. Fortunately, you can install libraries with just the .excalidrawlib file that gets generated. So if you’d like, you can download my library of AWS Backup resources and import that file in your instance of Excalidraw, and the same goes for any PR.