Excalidraw

Communication in a “mostly remote” workplace can be difficult. Lucky for us, there are new tools that can help us collaborate and share knowledge online!

A tool that I have used and enjoyed the last few years is Excalidraw. Description from their homepage:

Virtual whiteboard for sketching hand-drawn like diagrams. Collaborative and end-to-end encrypted.

In this post I will go through a few of Exalidraw’s features that are useful and great.

Basics

First, Excalidraw can draw most of the basic shapes you expect from a white boarding-tool.

Each tool has a keyboard shortcut from 0-9, and most of them also have a letter. Below is the complete list.

• 1 or V - Selection
• 2 or R - Rectangle
• 3 or D - Diamond
• 4 or O - Ellipsis
• 5 or A - Arrow
• 6 or L - Line
• 7 or X - Draw
• 8 or T - Text
• 9 - Image
• 0 - Library

Duplicate Command

Keyboard shortcut: cmd+D or opt+drag

Sometimes, you have created a really nice shape, and want more of it. Best way to do this is to either duplicate with cmd+D. If you have a specific place in mind for the duplicate, use opt+drag.

Copy to clipboard as PNG

Keyboard shortcut: shift + opt + C/V

Another useful feature for quick discussions is to create png images from a selection.

Now I have the images as a PNG and can paste in to a Slack message, or e-mail, without having to take a screenshot. Resulting PNG:

Set background color

Keyboard shortcut: G [code]

We can change background color by bringing up the color picker with g, and then choosing color.

I often use these colors:

Copy/paste styles

Keyboard shortcut: shift + opt + C

Curved and straight arrows

We can do curved lines, by pressing A and then clicking as many times as we want. If we want straight lines, press A, and then drag from start to finish.

Keyboard shortcut (curved): A click click click

Keyboard shortcut (straight): A drag

Graphs(!)

While writing this post, I found out that you can do graphs in Excalidraw! Only documentation I found is on their blog: “Tell your story story with charts”.

Keyboard shortcut: (with csv copied) cmd+V

To create a chart:

1. copy any two column CSV or table data, for example the table below, and
2. paste it into Excalidraw.

Result:

Eraser

Keyboard shortcut: E

And, of course, the most useful feature of them all. E for the eraser!

Conclusion

That’s all. Happy diagramming!

Resources

• The Excalidraw tool itself: excalidraw.com
• The Excalidraw blog

Bonus: features I don’t use at all

• Draw tool (X) - I prefer not to free hand anything…
• Flip horizontal/vertical (shift+H/V) - Does almost nothing to rectangles, diamonds, ellipses. Does exactly nothing to texts and library objects.
• Add link to selected shape (cmd + K) - Adds a web link to a shape. Might be useful?
• Set stroke color (S [code]) - Not very useful, since stroke should always be black.

If someone finds a good use case for these features, please tell me at @wahlstra.