Light

aretecode / system-design-templates-excalidraw Goto Github PK

View Code? Open in Web Editor NEW

99.0 3.0 1.0 286 KB

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

Home Page: https://github.com/aretecode/system-design-templates-excalidraw

License: MIT License

system-design system-design-interview system-design-template excalidraw emoji distributed-systems front-end-system-design prototyping design-templates

system-design-templates-excalidraw's Introduction

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

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

See 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 from txt to all 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

system-design-templates-excalidraw's People

Contributors

Stargazers

Watchers

Forkers

system-design-templates-excalidraw's Issues

📖 Documentation improvements

update docs once #2 is done (once approved) excalidraw/excalidraw-libraries#165
show dark and light themes (images)
add badges (if required)
add contributing guide (git)
PR/issue templates (git)

❓ Split libraries for excalidraw publishing

excalidraw/excalidraw-libraries#165

📖 Documentation updates

Update images in the preview
Document added feature once released

Update with smaller sized versions

The current versions create designs too large for excalidraw.
Add a version with smaller sized boxes.

⭐ feature: add separate library files + combined + system design flow boxes

add control flow components
add separate library files and instructions on using them
add system design flow (zoom management, analysis, data, API, high level) components

✨Feature: presets and examples for different interviews

Does this still work?

I tried uploading but got this.

💡 Idea: text expansion snippets

If this is useful to anybody else, share snippet collections for Alfred and other text expanders.

Submit PR to excalidraw-libraries

fork excalidraw-libraries
edit libraries json file, add excalidrawlib file, add preview img
submit PR

Documentation

add readme
write instructions on how to use (take from here => excalidraw)
add images
add tutorial video/gif

imgs

Icons

Analysis

Modifiers and presets

Prefab condition flows

Example

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.