/system-design-templates-excalidraw

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

MIT LicenseMIT

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

system-design-template-emoji

system-design-template-aretecode--user-requirement-analysis

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

system-design-template-aretecode--how-to-download clones repo, cd to cloned dir, and opens in finder/explorer.

2. Use in excalidraw

See how to

system-design-template-aretecode--how-to-import-to-excalidraw

More

How to customize? 🔗

system-design-template-aretecode-excalidraw--how-to-customize-and-use-tips

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.

system-design-template-aretecode--how-to-use-across-tabs-quickly

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?🔗