Overview
A lightweight architecture whiteboard for sketching system designs: draggable nodes for clients, services, data stores, queues, and custom components, connected by labelled edges. It ships with a sensible example board, persists your work in the browser, and can export the whole design as JSON.
How It Works
Drag nodes around the board; positions clamp inside the canvas bounds. Select a node to edit its title and description, change its kind, assign a custom colour from the swatches, or give a custom node its own label such as 'Edge worker'. Create edges by choosing a source and target and adding a label like HTTPS or cache-aside. Toggle the board-wide glassmorphism style, copy or download the design as JSON, and reset to the example board when you want a clean start.
Step-by-Step Usage Guide
- Start from the example board or drag nodes to arrange your own architecture.
- Edit a selected node's title, description, kind, colour, or custom label.
- Connect nodes with labelled edges to show how data flows.
- Copy or download the JSON when you want to save or share the design.
Technical Specifications & Standards
Node kinds map to fixed default colours — violet for clients, blue for services, green for data stores, amber for queues, slate for custom — but every node can override its colour and its glass-or-solid styling individually. Persistence is localStorage under the key CruxDev-system-design-whiteboard-v2, and the loader is defensive in two ways: it validates any saved payload field by field (unknown node kinds fall back to service, missing colours to the kind default), and it reads the older v1 key once to migrate boards saved by a previous version of the tool, then never writes the legacy key again. The JSON export carries an explicit version number so future format changes stay migratable. Node positions are clamped to keep nodes grabbable within an 860-by-520 board, which means very large designs can crowd — there is no zoom or auto-layout, by design; this is a sketching tool, not a diagramming suite like draw.io. Everything runs locally: no account, no sync, and clearing site data erases your boards.
Targeted Use Cases
- Sketching a design before an interview or a design-review meeting.
- Mapping an existing service's components to spot missing caches or queues.
- Preparing discussion boards for mentoring junior engineers.
- Capturing an agreed design in JSON to attach to a pull request description.
Notes & Gotchas
- Label edges with protocols or semantics — HTTPS, events, SQL — so the diagram reads itself.
- Use the custom node kind with a label for anything the four defaults do not fit.
- Download the JSON after significant sessions; localStorage is the only storage.
- Keep boards small; the fixed-size canvas is designed for single-diagram sketches.
Frequently Asked Questions
Where are my boards saved?
In your browser's localStorage under CruxDev-system-design-whiteboard-v2, saved as you work. Boards saved with an older version of the tool migrate automatically from the v1 key. Clearing site data removes them.
What node types are available?
Client, service, data store, queue, and a custom kind whose label you set — for example 'Edge worker' or 'CDN'. Each kind has a default colour you can override per node, along with an individual glass or solid style.
Can I export a board?
Yes. The export produces a versioned JSON document containing every node, edge, and style setting, either copied to your clipboard or downloaded as a file. It is JSON rather than an image, so it can be re-imported or diffed.
Does it support zooming or auto-layout?
No. The board is a fixed-size sketching canvas with clamped dragging, deliberately scoped to quick design sketches. For formal diagramming with zoom and layout, a dedicated diagramming tool remains the better choice.