Add numbered step circles and connector lines to screenshots for tutorials and documentation.
Tutorial screenshots often need two kinds of guidance at once: a location cue and an order. This tool places numbered step circles on a screenshot and adds connector lines so readers can follow the intended path without hunting through surrounding prose. It suits a single visual sequence, such as moving through controls in a dialog. The common surprise is that the annotations describe actions but do not create them. The result remains a static image, not a clickable tutorial or a record of what the interface actually did. Processing stays in the browser, and the screenshot is not uploaded.
Numbered circles provide the ordered anchors. A marker's numeral tells the reader when to look there, while its placement tells the reader what control, field, or region the step refers to. Keep the circle close enough to make that relationship clear without hiding the target's own label or state. The numbering should agree with the written procedure; the image itself cannot explain skipped numbers, branches, or optional steps.
Connector lines carry the reader's eye between markers or associate a marker with a target when direct placement would obscure useful screenshot content. Their meaning comes from their endpoints and surrounding layout, so a line should not appear to terminate at an unrelated control. Together, circles and lines form visible annotations over the source screenshot. They communicate spatial and sequential relationships, but they do not alter the pictured interface.
No. The tool adds visual step markers and connectors to an image; it does not make the pictured buttons clickable, enforce the numbered order, or expose the sequence as interface state. Use the annotated screenshot inside documentation, and keep the actual instructions in text. Text can cover prerequisites, alternate paths, expected results, and other details that a numbered image cannot establish on its own.
The screenshot is processed entirely in the browser and is not uploaded by this tool. That does not make the finished image safe to share. Visible names, account identifiers, messages, browser tabs, and other private content remain part of the screenshot unless removed beforehand. Step circles and connector lines are annotations, not redaction. Inspect every edge and background area before distributing the result.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.