System design template: excalidraw - emoji edition

Rough shapes to do rapid system design in front-end, full-stack, back-end, distributed, and product settings.

Preview

Goals

1. Make it easy to do common system designs.
2. Make system design faster.

Usage

1. Download

gh repo clone aretecode/system-design-templates-excalidraw && cd system-design-templates-excalidraw/src && ((open .) || (open `pwd`))

See in action

clones repo, cd to cloned dir, and opens in finder/explorer.

2. Use in excalidraw

See how to

More

How to customize? 🔗

There are so many icons, how do you use this in a real world setting? 🔗

Open 2 tabs, 1 you can drop in all the icons, then copy into the other tab, delete the unused, then re-arrange as-needed.

Why are the shapes not each in their own library component? 🔗

When I used other libraries on excalidraw, it was difficult to see the shape from the thumbnail/preview. Without a search feature, I found myself dragging and dropping each shape 1-by-1 to find the one I was looking for. The shapes here are loosely-grouped. This (ideally) makes the icons easier to find and copy in to any system design.

How to use in excalidraw without a gif?! TLDR

• Open excalidraw.
• Open library (at the top right).
• Click import (folder icon).
• Select the .excalidrawlib from your computer.

I want to download some other way, how? 🔗

wget

wget -O "system-design-template-emoji.excalidrawlib" "https://raw.githubusercontent.com/aretecode/system-design-templates-excalidraw/main/src/system-design-template-emoji.excalidrawlib"
  

Save file

1. Open the raw library file
2. Press Command-S ([Cmd ⌘] + [s] on osx, Ctrl+S on windows) to save the file.
3. Append .excalidrawlib extension to the file name and change format from txt to all files.
4. Click save in the save-as modal.

---

What tools did you use?🔗

• excalidraw to create and use the library
• imageoptim to reduce size of images exported by excalidraw
• excalidraw libraries for naming, formatting, library standards and instructions
• emoji.muan to search for emoji
• Gifski to convert mov recordings to gif
• keycastr to show key strokes
• github md docs for reference gfm