Hand-Drawn Sequence Diagram, Cleaned Up
A sequence diagram shows who talks to whom, in order. This one has a client, a server and a database: the client asks for a list, the server queries the database, the rows come back and the server answers.
This is the example where the result is furthest from a finished diagram, and it is shown as it came out.
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
- Three boxes along the top: Client, Server and Database.
- A dashed vertical line under each box, drawn as a row of short strokes, for the lifelines.
- Four horizontal lines between the lifelines for the messages, each one a single stroke, with its label written above it: GET /items, SELECT, rows and 200 OK.
- The board's reading mode was set to general. The messages were drawn as plain lines, without arrowheads.
What Sketio made of it
Scroll sideways to see the whole picture
Counted from the recording of this board:
- 3 shapes (Client, Server, Database)
- 4 words kept as text (GET /items, SELECT, rows, 200 OK)
- 7 connectors: 0 joined to a shape or icon at both ends, 0 with an arrowhead, 3 dashed
- The three boxes became rectangles with their names inside.
- Each dashed lifeline became one dashed line.
- The four message labels were read as text, and the four message lines became lines in the right places.
What it did not get right
- The messages have no arrowheads, so the diagram does not show who is calling whom. Sketio adds an arrowhead only to a line that is joined to a shape or a word at one end or both, and a line cannot be joined to another line, which is what the dashed lifelines are.
- The messages are not attached to the lifelines, so moving a lifeline does not move them.
- The labels are plain text near the lines, not part of them.
- Sketio has no sequence-diagram mode: it read boxes, dashed lines, lines and words. Use it to get a clean layout of the pieces, then add arrowheads by hand.
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
- Getting the participants and the order of a request down while you are still thinking.
- Sketching an API call chain for a ticket or a design review.
- Starting a diagram you will finish by hand.