├── .gitignore ├── LICENSE ├── README.md └── src └── system-design-template-emoji.excalidrawlib /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # See http://help.github.com/ignore-files/ for more about ignoring files. 3 | 4 | # Exclude .npm for calculation of package size on Coverlay 5 | .npm 6 | # Output of 'npm pack' 7 | *.tgz 8 | 9 | # System Files 10 | .DS_Store 11 | .DS_STORE 12 | Thumbs.db 13 | 14 | # Local only files 15 | .scratch 16 | .idea 17 | @@ 18 | .tmp 19 | 20 | # Secret local only files 21 | .secret 22 | .env 23 | certs 24 | 25 | # Dependency directories & compiled output 26 | node_modules 27 | dist 28 | build 29 | 30 | # Logs 31 | npm-debug.log* 32 | yarn-debug.log* 33 | yarn-error.log* 34 | lerna-debug.log -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 James Wiens 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # System design template: excalidraw - `emoji edition` 2 | 3 | > Rough shapes to do rapid system design in front-end, full-stack, back-end, distributed, and product settings. 4 | 5 |
Preview 6 | 7 | ![system-design-template-emoji](https://user-images.githubusercontent.com/4022631/126106256-a60fc6c8-1924-4fe2-9a02-78c38254f060.png) 8 | 9 |

10 | system-design-template-aretecode--user-requirement-analysis 11 |

12 | 13 |
14 | 15 |
Goals 16 |
    17 |
  1. Make it easy to do common system designs.
    2. 18 |
  2. Make system design faster.
    3. 19 |
20 |
21 | 22 | ## Usage 23 | 24 | ### [1. Download] 25 | [1. Download]: #-download--clone 26 | 27 | ```bash 28 | gh repo clone aretecode/system-design-templates-excalidraw && cd system-design-templates-excalidraw/src && ((open .) || (open `pwd`)) 29 | ``` 30 | 31 | 32 |
See in action 33 | 34 | ![system-design-template-aretecode--how-to-download](https://user-images.githubusercontent.com/4022631/126106274-4e416beb-9bd9-4c76-92e4-d0c33a145245.gif) 35 | _clones repo, cd to cloned dir, and opens in finder/explorer._ 36 | 37 |
38 | 39 | ### [2. Use in excalidraw] 40 | [2. Use in excalidraw]: #-use-in-excalidraw 41 | 42 |
See how to 43 | 44 | ![system-design-template-aretecode--how-to-import-to-excalidraw](https://user-images.githubusercontent.com/4022631/126106181-d37baa44-105f-4253-8fea-3d5b88fa22c4.gif) 45 | 46 |
47 | 48 | ## More 49 | 50 |
51 | How to customize? 🔗 52 |

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

53 |
54 |
55 | There are so many icons, how do you use this in a real world setting? 🔗 56 |

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.

57 |

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

58 |
59 |
60 | Why are the shapes not each in their own library component? 🔗 61 |

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.

62 |
63 |
How to use in excalidraw without a gif?! TLDR 64 | 70 |
71 |
I want to download some other way, how? 🔗 72 |
wget
73 | 
wget -O "system-design-template-emoji.excalidrawlib" "https://raw.githubusercontent.com/aretecode/system-design-templates-excalidraw/main/src/system-design-template-emoji.excalidrawlib"
74 |
75 |
Save file
76 |
    77 |
  1. Open the raw library file
    2. 78 |
  2. Press Command-S ([Cmd ⌘] + [s] on osx, Ctrl+S on windows) to save the file.
    3. 79 |
  3. Append .excalidrawlib extension to the file name and change format from txt to all files.
    4. 80 |
  4. Click save in the save-as modal.
    5. 81 |
82 |
83 |
84 |
85 | What tools did you use?🔗 86 |
87 | 96 |
97 |
98 | --------------------------------------------------------------------------------