Whether you are practicing system design interviews or drawing system diagrams during actual work, useful tools can make it easier for you to draw system diagrams. There are several highly recommended system diagram tools in the open source community. In this article, we have selected the four most recommended ones for everyone.
Among the four recommended system design diagram tools, we further divide them into two categories. One category is recommended for use in interviews, namely Excalidraw and tldraw. These two tools allow you to use them directly. Use your mouse to pull up the system design, just like you would draw it by hand, but in a digital version. In actual interviews, almost all of them will be hand-drawn directly online, so these two tools are particularly suitable for use during practice interviews.
The other category is recommended for use at work, namely Diagrams and Mermaid. Both types of diagrams require the input of some process code, so they may not be used directly during system design interviews. However, in actual work, the pictures drawn with these two tools are clear and beautiful, and many people in the community currently use them.
Excalidraw
Excalidraw has more than 50,000 stars on GitHub and is a very popular open source digital whiteboard (Open source project website, Official website).
Its characteristic is that you can directly open its website and then start drawing system design diagrams. If you are a product manager, you can also use it to draw flow charts and product concept diagrams (mockups). Theo, a well-known technology YouTuber, often draws pictures while explaining a certain technology. He uses Excalidraw.
tldraw
tldraw has more than 25,000 stars on GitHub (Open source project URL, official website).
In terms of basic operations, tldraw is quite similar to Excalidraw. However, what has recently propelled tldraw to fame within the community is its integration of the make real feature, which harnesses the AI generation capabilities of GPT. "Make real" reads your hand-drawn content and utilizes the power of GPT to convert it into functional components. After numerous community tests, the results have been overwhelmingly positive. If you're interested in trying out the "make real" version, you can directly access it at this link.
Diagrams
Diagrams is a very cool open-source project with over 30,000 stars on GitHub (project link, official website).
Diagrams allows you to directly use images of various components when drawing system design diagrams. For example, if you want to add Nginx to the system design, you can directly use
from diagrams.onprem.network
import Nginx
Then
ingress = Nginx("ingress")
If you use Redis in your system, you can directly introduce
from diagrams.onprem.inmemory
import Redis
Then
primary = Redis("session")
Then you can draw the beautiful picture below
Currently, Diagrams supports a variety of common components, including those from major cloud vendors, such as the well-known AWS and GCP. It also opens up custom components, allowing you to create your own commonly used components and place them in your system design.
Mermaid
Mermaid is an open source tool that allows you to input process code and convert it directly into system design diagrams for you (Open source project website, Official website).
For example, the following process code can produce the following picture
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
Mermaid also pre-defines common system components. For example, if you want to add a database to the system, you can directly use [(Database)] and a diagram of the database will be generated. Mermaid has created a page that allows you to play directly online (Website click here), which is recommended to those who are interested.
Summarize
The above four open-source tools are recommended for different purposes: the first two are suggested for use in system design interviews, while the other two are recommended for drawing system design diagrams in practical work. 🙂