Hand-Drawn System Architecture Diagram Example
A system architecture diagram is usually a few boxes and arrows: what talks to what. This one is a small web system, with a browser, a load balancer, two application servers, a database and a cache.
It was drawn as plain boxes and an oval, with no cloud icons, to show what Sketio does with a general diagram.
Generated handwriting. The handwriting on this page was generated by a script that imitates hand-drawn strokes. The cleaned-up diagram is Sketio's actual output, unedited.
What was drawn
Scroll sideways to see the whole picture
- Five boxes (Browser, Load balancer, App server 1, App server 2 and Cache) and an oval for the Database, each with its name written inside.
- Six arrows, each one a single stroke: Browser to Load balancer, Load balancer to both servers, both servers to Database, and App server 2 to Cache.
- The board's reading mode was set to general.
What Sketio made of it
Scroll sideways to see the whole picture
Counted from the recording of this board:
- 6 shapes (Browser, Load balancer, App server 1, App server 2, Database, Cache)
- 6 connectors: 6 joined to a shape or icon at both ends, 6 with an arrowhead, 0 dashed
- Every name was read correctly from the handwriting.
- The five boxes became rectangles and the oval an ellipse, each with its name as a label.
- All six arrows were joined to the shapes at both ends, with arrowheads in the direction they were drawn.
What it did not get right
- The two servers are drawn as two separate boxes with the same arrows, because that is what was drawn. Sketio does not group them.
- The arrows were drawn straight and stayed straight, so the one from App server 2 to Database runs diagonally across the space between the shapes.
Opens Sketio's cleaned-up diagram as a board you can edit.
By continuing, you agree to the Terms of Service and Privacy Policy, including sending images of your strokes, diagram labels and similar data to providers in the United States (Cloudflare, Inc. and TypeSafe AI, Inc.) for AI conversion.
When to use it
- Sketching a system before you build it, or while you explain an existing one.
- Replacing a photo of a whiteboard in a design document.
- Drafting a diagram that you will later swap for cloud-specific icons.