Hand-Drawn Flowchart to Clean Flowchart
A flowchart is the diagram most people sketch first, so it is a fair test of whether handwriting turns into something clean. This one is a login flow: ask for a login, check it, then either open the app or show an error and ask again.
Below are the strokes as they were drawn and the flowchart Sketio made of them.
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
- Two ovals for Start and End, three boxes for Enter login, Open app and Show error, and a diamond for Valid?.
- Six arrows, each one a single stroke, including one from Show error back up to Enter login.
- The words Yes and No, written next to the two arrows that leave the diamond.
- The board's reading mode was set to flowchart. Each outline was drawn first and its label written inside it afterwards.
What Sketio made of it
Scroll sideways to see the whole picture
Counted from the recording of this board:
- 6 shapes (Start, Enter login, Valid?, Open app, End, Show error)
- 2 words kept as text (Yes, No)
- 6 connectors: 6 joined to a shape or icon at both ends, 6 with an arrowhead, 0 dashed
- The two ovals became ellipses, the three boxes rectangles and the diamond a diamond, each with the word that was written inside it.
- All six arrows were joined to the shapes at both ends, with arrowheads, including the one that loops back.
- Yes and No were read as the words they are.
What it did not get right
- Yes and No stayed as separate pieces of text next to the arrows. They were not turned into labels on the arrows, so they do not move with them.
- An arrow can stay a pen stroke instead of becoming a connector. In our first recording of this diagram two of the arrows did, so we drew it again with the shapes further apart, and every arrow was read. This page shows the second recording.
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
- Drawing a process while you talk it through, then keeping the clean version.
- Documenting a decision path such as a login, an approval or a retry.
- Handing a rough flow to someone who needs to read it, not decode it.