Virtual whiteboarding

[pringshia]

Challenge

How fast can I recreate this diagram digitally?

Rationale: In the world of remote work, it helps to be able to quickly whip up a diagram to explain an idea.

(source)

Constraints

• Tool of choice must allow for the diagram to be "saved" so it can be edited in the future.
• Work at a normal, brisk pace, NOT a competitive, intense pace
• Labels can be a rough approximation of what's in the diagram

[pringshia]

9:03 mins

First attempt using Excalidraw, pretty happy with the outcome overall. Some familiarity with hotkeys could be a big boost.

Reflections

• My vimium bindings often got in the way with the tool's shortcuts. Had to keep re-entering insert mode to be able to use the hotkeys.
  • Added excalidraw as an exception to vimium's excluded URLs list so this shouldn't be an issue going forward
• Trying to figure out how to draw the database cylinder burned up some time. Mostly an idiosyncratic factor
• I forgot to add the Layer labels and the HTML arrow label
• There are a lot of great shortcuts, but I'm not sure if all the settings are keyboard selectable. I'll need to research that some more
• Some elements were hard to select at times, I had to click right on the edge of the line or drag a bounding box

[pringshia]

Some research notes for Excalidraw:

• It supports component libraries and there's one called System Design Components by @Rohan Pithadiya that provides both the database and that stacked squares as pre-built diagrams.
• pressing ? shows all the keyboard shortcuts
• pressing g opens up the bg color popup (and s for stroke)
• pressing q lets you lock the tool, so that it doesn't revert back after you're done
• learned that text can be added to arrows
• Cmd+Click is great for deep clicking into groups, e.g. prebuilt diagrams w/ text in them. Enter, text change, Cmd+Enter is a fast way to update the text thereafter

[pringshia]

5:30 min

https://www.loom.com/share/cd0f6c8916c2478f9987972ee775a87a

Reflections

• way faster this time, the prebuilt components and shortcut familiarity definitely helped
• having the q lock turned on feels more natural to me
• feeling pretty close to the limit at this point, maybe some more familiarity around shortcuts for the arrow heads could help (q vs t)
• I wish there was a shortcut key for changing text alignment (e.g. between center and left align)