Why Excalidraw is mightier than the pen (and the sword)

(Cover photo by KOBU Agency on Unsplash. Originally posted on Medium.)

TLDR: Excalidraw is a web-based diagramming tool that I believe may seriously replace the need for pen and paper for quick sketches and diagrams.

---

“A picture speaks a thousand words”

For me, it’s a quote that couldn’t be more true. I often find myself searching for a pen and paper to try and draw out whatever it is I’m trying to explain or understand. How very analogue.

It’s 2020, and there should be a web app for everything I need!

---

While it’s true that there are several online apps that can be used for diagramming (many of which I’ve tried), none have managed to prove themselves better than just keeping a pen and paper handy.

But why is that? Let’s look at what makes the pen and paper so good:

• ⏱️ Pick up and go. (There’s no loading screen for a piece of paper.)

• ✏️ Complete freedom in what you draw. (Text, Images, Arrows, whatever!)

• 📘 Permanent from the start. (As soon as you’ve drawn on it, it’s there forever.)

• 📑 Annotate after the fact. (Add extra bits of information as you go.)

• 💷 Free! (Minus the cost of the paper, I guess.)

But there are definitely some things that we can improve on:

• 👫 Collaboration. (It’s kind of hard to share a paper, especially over a video call.)

• 💽 Digital Storage. (I don’t want paper cluttering up my desk!)

• 🔐 Security. (I often draw out things for clients at work, I don’t want to have to shred every scrap of paper.)

• 🌍 The Planet. (Paper isn’t very sustainable, we can do better.)

---

For a long time, pen and paper went unbeaten. Then I discovered Excalidraw.

Entirely web-based, end-to-end encrypted and completely open-source (with nearly 10k stars on GitHub!), it was a tool that I instantly got along with and is now my go-to tool whenever I need to sketch out my thoughts or help explain something visually.

So what makes it different?

Well, for one it follows the KISS Principle perfectly. To get going with it you just visit the URL and start drawing. No loading, no sign-up, just draw.

Shapes are kept simple so that the application is quick to use. Text can be added by double-clicking the place you want it. It uses an infinite canvas. Text and background colours can either be selected from a palette or via standard HTML Hex Colour codes. The list goes on!

The second thing that makes it different in my opinion is the security and sharing capability of the drawings themselves. Excalidraw stores all drawings on the server as blobs that are end-to-end encrypted meaning that even though the data is held remotely, no one on the server can see the content. Drawings persist across visits and can be exported as PNG, SVG or even just as a link that includes the blob reference and decryption key.

But above all, it was the live collaboration that convinced me that Excalidraw could be a replacement for the pen and paper. While there are other platforms that implement collaboration (Lucidchart and Creately spring to mind as good examples of this), none are as useable as Excalidraw’s Socket.io-based implementation. From starting a diagram, I can (with two clicks) generate a URL to give to others to let them see and contribute to my drawing.

They can then jump in my drawing and in real-time I can see their cursor, see anything they (or I) add to the document and we can start to transform my basic diagram into whatever it needs to be: a process diagram, block diagram, architecture diagrams (to an extent) or just a generic whiteboard to capture notes.

I use the live collaboration features of Google Docs every day both at work and at home, and yet the ability to have 5 or 6 people add to and annotate my diagram in real-time still blew my mind the first time I shared a diagram on a video call with a client.

---

So let’s see how Excalidraw stacks up against the benefits of pen and paper we saw earlier:

• ⏱️ Pick up and go. ✅ Excalidraw loads super fast, and by adding it to my bookmarks bar I can load it up in a comparable time to grabbing a pen and paper.

• ✏️ Complete freedom in what you draw. ✅ While the shape variety is basic, it covers 90% of my use cases when combined with arrows and text!

• 📘 Permanent from the start. ✅ Drawings persist across sessions, and I can save them both locally (as BLOBs) and share them online (as URLs).

• 📑 Annotate after the fact. ✅ The infinite canvas lets me expand into whatever space I need and I can place text arbitrarily on the canvas.

• 💷 Free! ✅ Not only is it free, but it’s completely open-source. There’s even a Docker image that I could self-host (Cloud Run anyone?) and use.

• 👫 Collaboration. ✅ See above, it’s absolutely epic.

• 💽 Digital Storage. ✅ Digital from the get-go. I can store drawings either locally or online and sharing is a breeze.

• 🔐 Security. ✅ End-to-end encryption + P2P-based collaboration = Secure enough for me!

• 🌍 The Planet. ✅ While it does run on a server that takes up power, the more popular it becomes the more efficient it is per-person!

---

All in all, I’m quite impressed with it as a tool so far! But there may be some questions that have crossed your mind:

Is Excalidraw a replacement for {Lucidchart|Creately|Draw.io|Google Drawings|Visio|Insert Tool Here}?

No. Those tools are excellent for complex diagrams, precise architectural diagrams and those flowchart diagrams that get printed out on A3. Stick to those for those tasks. Use Excalidraw for the simple stuff.

Can Excalidraw be a replacement for everything I do on pen and paper?

No. I don’t believe any web application used with a mouse or trackpad will ever replicate the freedom of freehand drawing on paper. But most of the time I’m just wanting to put some text in a box and draw a line between them, and Excalidraw is perfect for that.

So while I don’t want to claim it’s the perfect solution for every drawing occasion, I do want you to give Excalidraw a try the next time you need a drawing to help illustrate your message.

---

🧡 Tom Anderson
www.thomas-anderson.net
Liked something I did and want to help me out?