How to draw System Design Diagrams

Sunil Rav — Wed, 06 Dec 2023 22:16:02 +0000

When I was preparing for my System Design Interview, I found that
most diagramming tools on the market are generic drawing tools that don't directly assist in drawing software System Design Diagrams. Usually, these tools only offer a bunch of shapes and the ability to connect them by arrows.

This gave me the idea of building a tool that is specific to System Design called SystemDraw.

Nodes

With SystemDraw you can easily drag and drop software architecture elements like Load Balancers, Databases, Caches, etc. You don't need to import any special libraries or extensions.

Attributes

Each SystemDraw node comes with a special set of attributes. For example, you can configure a database node with the type of database (SQL, document, wide column, graph), the type of replication used(leader-follower, multi-leader), and the type of sharding.

As another example, on the cache node, you can specify the type of cache(in-memory, distributed), coherence(write-through, write-behind), and also the eviction policy (FIFO, LRU, LFU).

Tables

SystemDraw has a special node for Table design. You can simply drag in the table node and start adding the column names and data types.

Traffic Estimator

SystemDraw also has a built-in node called Traffic Estimator. The Traffic Estimator helps in calculating the estimated storage, bandwidth, and cache for the system.

Try it

You can try it out today at SystemDraw, no login is required. If you want to save, just use your Google account to log in and you will have the ability to store it to your browser's local storage.

Tech Stack

The tech stack I ended up using for this tool is NextJs with a MongoDb database deployed on Vercel. The actual library used for the drawing page is ReactFlow.

Follow me at https://twitter.com/sunilr