diff --git a/README.md b/README.md index f8a39b9..f698b7e 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ -# System design template: excalidraw (emoji edition) +# 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 @@ -12,7 +13,6 @@
- ## Usage ### [1. Download] @@ -22,44 +22,39 @@ gh repo clone aretecode/system-design-templates-excalidraw && cd system-design-templates-excalidraw/src && ((open .) || (open `pwd`)) ``` -
Command execution gif + +
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._
- - -
Other ways to download - -
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. -
- -
- -
- -### ### [2. Use in excalidraw] [2. Use in excalidraw]: #-use-in-excalidraw -
Steps in a gif +
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)
-
Steps in text +## 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).
    • @@ -67,31 +62,29 @@ _clones repo, cd to cloned dir, and opens in finder/explorer._
  • Select the .excalidrawlib from your computer.
- ---- - -### More - -
- F.A.Q. 🔗 -
-
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 customize? 🔗
-

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

-
+
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. +
+
-
- Tools 🔗 + What tools did you use?🔗