不论是在练习系统设计面试，或者是实际工作时要画系统的图表 (diagram)，好用的工具都能让你更轻松地画出系统图表。开源的社群中有几款让人非常推荐的系统图表工具，在这篇文章中，我们精选了四个最推荐的给大家。

在四个推荐的系统设计图表工具中，我们进一步分成两类，一类是推荐在面试中使用，分别是 Excalidraw 与 tldraw，这两个工具是让你可以直接用滑鼠来拉出系统设计图，就像你用手绘一样，只是变成数位版本的。在实际面试时，几乎都会是这种线上直接手绘，所以这两个工具特别适合在练习面试时用。

另一类则是推荐在工作的时候使用，分别是 Diagrams 与 Mermaid。这两类图都需要输入一些流程的代码，所以在系统设计面试时可能没办法直接用。但是在实际工作中，用这两个工具画出来的图清楚又好看，目前社群中有不少人使用。

Excalidraw

Excalidraw 在 GitHub 上有超过 5 万个星星，是个非常热门的开源数位白板 (开源专案网址、官方网站)。

它的特点是你可以直接开启它的网站，然后就能直接开始画系统设计图，如果是产品经理，也可以用来画流程图、产品概念图 (mockup)。知名的技术 YouTuber Theo 很常在讲解某个技术时，边讲边画图，他用的就是 Excalidraw。

tldraw

tldraw 在 GitHub 上有超过两万五千个星星 (开源专案网址、官方网站)。

在基本操作上，跟 Excalidraw 很相似。但 tldraw 最近在社群中爆红，主要原因是整合了 GPT 推出具有 AI 生成能力的 make real 功能。make real 会读取你手绘的内容，然后透过 GPT 的能力，把手绘的转成具功能的元件。在社群中许多人测试后，效果都非常好。假如你想玩玩 make real 版本，可以直接上这个网址。

Diagrams

Diagrams 是个非常酷的开源专案，GitHub 上面超过 3 万个星星 (开源专案网址、官方网站)。

Diagrams 让你在画系统设计图时，可以直接使用各类元件的图像，例如你要在系统设计中加入 Nginx 当反向代理时，你可以直接使用

from diagrams.onprem.network
import Nginx

然后

ingress = Nginx("ingress")

假如在系统中使用 Redis ，你可以直接引入

from diagrams.onprem.inmemory
import Redis

然后

 primary = Redis("session")

然后就能够画出下面这张美图

目前 Diagrams 支援了各类常见的元件，也涵盖了各大云端厂商的，例如大家熟知的 AWS 与 GCP 等；同时也开放自订义的元件，让你可以去创造自己常用的元件，放到你的系统设计中。

Mermaid

Mermaid 是一款让你可以输入流程的代码后，会直接帮你转换成系统设计图表的开源工具 (开源专案网址、官方网站)。

举例来说，以下的流程代码，可以产出下面的这张图

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

Mermaid 也预先定义好常见的系统元件，例如想在系统中加入资料库，可以直接用 [(Database)] 就会生出资料库的图。Mermaid 有做一个让你可以在线上直接玩的页面 (网址点这边)，推荐给有兴趣的人。

总结

以上四个开源工具，前两个推荐大家在系统设计面试用，另外两个推荐在工作实际要绘制系统设计图时用。如果大家有其他推荐的开源系统设计相关工具，也欢迎让我们知道，可以直接在我们的 Facebook 或 Instagram 上留言或私讯我们 🙂