Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aretecode/system-design-templates-excalidraw
Rough shapes to do rapid system design in front-end, full-stack, back-end, distributed, and product settings.
https://github.com/aretecode/system-design-templates-excalidraw
design-templates distributed-systems emoji excalidraw front-end-system-design prototyping system-design system-design-interview system-design-template
Last synced: about 1 month ago
JSON representation
Rough shapes to do rapid system design in front-end, full-stack, back-end, distributed, and product settings.
- Host: GitHub
- URL: https://github.com/aretecode/system-design-templates-excalidraw
- Owner: aretecode
- License: mit
- Created: 2021-07-18T06:17:13.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-08-01T01:16:31.000Z (over 3 years ago)
- Last Synced: 2024-11-10T15:51:01.449Z (3 months ago)
- Topics: design-templates, distributed-systems, emoji, excalidraw, front-end-system-design, prototyping, system-design, system-design-interview, system-design-template
- Homepage: https://github.com/aretecode/system-design-templates-excalidraw
- Size: 279 KB
- Stars: 106
- Watchers: 3
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
- Make it easy to do common system designs.
- Make system design faster.
## Usage
### [1. Download]
[1. Download]: #-download--clone```bash
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]
[2. Use in excalidraw]: #-use-in-excalidrawSee 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
- 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