Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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 2 months ago
JSON representation

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

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



![system-design-template-emoji](https://user-images.githubusercontent.com/4022631/126106256-a60fc6c8-1924-4fe2-9a02-78c38254f060.png)





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




Goals

  
    

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

        
  2. Make system design faster.
    3. 

      



## 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



![system-design-template-aretecode--how-to-download](https://user-images.githubusercontent.com/4022631/126106274-4e416beb-9bd9-4c76-92e4-d0c33a145245.gif)

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



### [2. Use in excalidraw]

[2. Use in excalidraw]: #-use-in-excalidraw



See how to



![system-design-template-aretecode--how-to-import-to-excalidraw](https://user-images.githubusercontent.com/4022631/126106181-d37baa44-105f-4253-8fea-3d5b88fa22c4.gif)



## 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. 

        
  2. Press Command-S ([Cmd ⌘] + [s] on osx, Ctrl+S on windows) to save the file.
    3. 

        
  3. Append .excalidrawlib extension to the file name and change format from txt to all files.
    4. 

        
  4. Click save in the save-as modal.
    5. 

      


  



  What tools did you use?🔗