I bombed a system design interview last year — not because I didn’t know the architecture, but because I spent the first 5 minutes fighting Excalidraw.
So I built SystemDesignBoard — a free, keyboard-first whiteboard specifically for system design interviews.
What it does
You open it, press a key, and start drawing. No account, no onboarding, no drag-from-a-sidebar friction.
- R → place a Service node
- C → place a Database/Cache/Queue
- A → connect two nodes
- N → open the scratchpad for scale math
The features I’m most proud of
Animated connectors that show communication type
Instead of just drawing arrows, connectors visually encode how services talk:
- ⇄ sync — paired dashes (request + ACK)
- ≋ stream — near-solid fast line with glow (continuous pipeline)
This matters in interviews — your interviewer can glance at your diagram and immediately understand the communication pattern.
Cloud provider badges
Tag any node as AWS (EC2, Lambda, RDS, S3), GCP (GKE, Cloud Run, Firestore), or Azure. Each subtype has its own icon.
Trade-off logging
Right-click any node → Log Trade-offs → attach your CAP theorem stance, consistency level, and scaling strategy directly to the component.
Diagram-as-Code
Type:
[Mobile App] -> [API Gateway]
[API Gateway] -> [Auth Service]
[Auth Service] -> [Users DB]
[Feed Service] -> [Posts DB x3]
[Feed Service] -> [Redis Cache]
Hit Apply — it auto-lays out the whole architecture in seconds.
Export to animated GIF
Export your diagram as a GIF that shows live traffic flow animations. Great for sharing after an interview or in a design doc.
Tech stack
- React + TypeScript + Vite
- @xyflow/react (ReactFlow v12) for the canvas
- Zustand + Immer for state with full undo/redo
- html-to-image + gifshot for PNG/GIF export
It’s free and open
No signup required. Works entirely in the browser. Free during beta.
Would love feedback — especially from anyone who’s done system design interviews recently. What’s missing? What’s annoying? Drop a comment below.
답글 남기기