Rough shapes to do rapid system design in front-end, full-stack, back-end, distributed, and product settings.
Goals
- Make it easy to do common system designs.
- Make system design faster.
gh repo clone aretecode/system-design-templates-excalidraw && cd system-design-templates-excalidraw/src && ((open .) || (open `pwd`))
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 -O "system-design-template-emoji.excalidrawlib" "https://raw.githubusercontent.com/aretecode/system-design-templates-excalidraw/main/src/system-design-template-emoji.excalidrawlib"
- Open the raw library file
- Press
Command-S
([Cmd ⌘]
+[s]
on osx,Ctrl+S
on windows) to save the file. - Append
.excalidrawlib
extension to the file name and change format fromtxt
toall files
. - 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