How to Add Arrows & Shapes to Screenshots on Mac

When shapes and arrows communicate faster than text

A red rectangle around a misaligned button communicates the problem instantly. Writing “the submit button on the checkout page appears to have 3 extra pixels of left margin compared to the input field above it” takes longer to write and longer to parse.

Shapes and arrows are the visual equivalent of pointing. They direct attention to a specific area without requiring the viewer to interpret a written description. This is valuable in several common scenarios:

Bug reports

When filing a bug, a screenshot with a red circle around the broken element is worth more than a paragraph. QA engineers, designers, and developers all immediately understand what they are looking at. The same applies when sending a screenshot to an AI coding assistant—circle the bug, and the AI knows where to focus.

Design feedback

Arrows connecting elements show intended flow. A rectangle highlights an area that needs attention. A circle isolates a specific icon or piece of text. These visual cues map directly to how designers think about interfaces.

Code review context

When a code change produces a visual difference, annotated before-and-after screenshots make the review concrete. Arrows pointing from one state to another show exactly what changed and whether the change is correct.

AI prompting

For AI coding tools, shapes and arrows reduce the amount of text you need to include in your prompt. Instead of describing the location and appearance of a UI element, you draw an arrow to it and say “fix this.” The AI sees the arrow, identifies the element, and works on the right thing.

macOS Preview markup shapes

Every Mac includes Preview, which has a surprisingly capable markup toolset for basic shape annotations. Here is what you can do with it and where it falls short.

Available shapes in Preview

Open any screenshot in Preview and click the Markup button (the pen tip icon in the toolbar) or press Cmd+Shift+A. The shapes menu gives you access to:

• Rectangle — Click and drag to draw a box. Useful for highlighting regions.
• Ellipse — Draw circles or ovals to isolate specific elements.
• Line — A straight line between two points. You can add arrowheads by selecting the line and changing the endpoints in the inspector.
• Speech bubble — Add callout text boxes attached to a pointer.
• Star and polygon — Decorative shapes, less useful for annotations.

How to draw an arrow in Preview

Preview does not have a dedicated arrow tool, which catches many users off guard. To create an arrow, you need to:

1. Select the line shape from the Shapes menu
2. Draw a line on your screenshot
3. With the line selected, open the Shape Style inspector
4. Change one or both endpoints to arrowheads

This works, but it is three extra steps compared to a dedicated arrow tool. If you are annotating screenshots frequently, this friction adds up.

Customization options

Preview lets you change the border color, fill color (for closed shapes), line thickness, and line style (solid, dashed, dotted). The color picker supports custom colors, so you can match your team's annotation conventions.

Limitations

• No dedicated arrow tool—requires multiple steps to create arrows
• No snapping or alignment guides for precise placement
• Cannot group or lock annotations
• No keyboard shortcuts for switching between shape types
• Saving overwrites the original file unless you use Export

Third-party alternatives

Several Mac apps offer more capable shape annotation tools than Preview. Here is how the main options compare.

The trade-off with third-party tools

All of these tools solve the shape annotation problem, but none of them are built specifically for AI coding workflows. They produce annotated images that you then need to save, find, and paste into your AI tool. The capture-annotate-paste pipeline remains fragmented across multiple apps.

LazyScreenshots shapes and arrows

LazyScreenshots approaches shape annotations from the perspective of someone who needs to communicate visually with AI coding tools. Every design decision prioritizes speed and clarity.

Available tools

• Arrow — Single-click arrow tool. Click the start point, drag to the end point. The arrowhead direction, size, and style are automatically optimized for readability.
• Rectangle — Draw highlight boxes around UI regions. Transparent fill with a colored border is the default, which works well for showing areas of interest without hiding the underlying content.
• Circle / Ellipse — Circle a specific element to isolate it visually. Useful when the element is small or surrounded by similar-looking elements.
• Line — Straight lines for showing alignment, connections, or measurements.

Keyboard-first workflow

Each shape tool has a keyboard shortcut, so you never need to click the toolbar. After capturing a screenshot, press the shortcut key for your shape, draw it, and press Enter to finalize. The entire capture-annotate-copy flow stays on the keyboard.

Smart defaults for AI readability

Shapes in LazyScreenshots default to colors and thicknesses that AI vision models can reliably detect. Red rectangles with a 2px border, arrows with clear heads, and circles with enough contrast to stand out against any background. These defaults are chosen based on testing across Claude, GPT-4o, and Gemini vision models.

Combining shapes with numbered markers

You can use shapes and numbered markers together. For example, draw a rectangle around a section of the UI, then drop numbered markers on specific elements within that rectangle. In your prompt, reference the rectangle for context and the numbers for specific changes.

Tips for clean, readable annotations

Annotations should make your screenshot clearer, not messier. Here are practical guidelines for creating annotations that communicate effectively.

1. Use one color for one purpose

Pick red for problems, green for approved areas, blue for informational callouts. Stick to this convention consistently. When the viewer (human or AI) sees a red circle, they immediately know it indicates an issue.

2. Do not over-annotate

Five to seven annotations per screenshot is a practical maximum. Beyond that, the annotations themselves become visual noise. If you need to annotate more elements, take multiple screenshots of different areas instead.

3. Keep arrows short and direct

An arrow should start near the annotation source and point directly at the target. Long, curving arrows are hard to follow. If the start and end points are far apart, consider using a numbered marker system instead.

4. Use rectangles for regions, circles for elements

A rectangle says “look at this area.” A circle says “look at this specific thing.” Using them consistently helps the viewer parse your annotations quickly.

5. Leave space between annotations and content

When possible, position annotations so they do not obscure the elements they reference. A rectangle around a button should have enough padding that the button text remains fully readable. An arrow should point at an element, not cover it.

6. Crop before annotating

A tightly cropped screenshot with one annotation communicates more clearly than a full-screen capture with ten annotations. Crop to the relevant area first, then annotate what remains.

7. Consider the background

Red annotations on a red UI are invisible. If your UI uses a color that conflicts with your annotation color, switch to a contrasting color. White or yellow annotations work well on dark UIs; red or blue work well on light UIs.