drafty

How to annotate a diagram

Quick answer

To annotate a diagram, add text callouts or pinned comments to specific shapes, arrows, or regions — explaining what each part does, flagging decisions, or asking questions. In Lucidchart and Draw.io, right-click any shape and choose 'Add comment'. In Figma or Miro, press C and click the element. To collect feedback from a client, export the diagram and share a link they can mark up in their browser without a Lucidchart or Miro account.

Step 1

In Lucidchart or Draw.io (right-click → comment)

In Lucidchart, right-click any shape and choose 'Add comment' — a threaded note attaches to that shape. In Draw.io (diagrams.net), right-click and select 'Edit Tooltip' for persistent hover-text, or use 'Edit → Insert → Text' to drop a floating annotation box next to a shape. Both are free to use. The thing that trips people up: Lucidchart's comment feature requires collaborators to have a Lucidchart account. Share the diagram link with a client who doesn't have one and they can view it, but they can't leave a comment — they hit a signup wall instead. This is the most common point where diagram review breaks down.

Step 2

In Miro or FigJam (sticky notes and comment pins)

Miro and FigJam both have a comment tool (C in FigJam, the speech bubble in Miro) that pins a note to any element on the board. These work well for internal teams already inside those tools. The catch is the same: anyone you want to leave a comment needs a Miro or FigJam account. Miro's guest viewer link lets external people view the board, but 'view only' means exactly that — they can't annotate. If a client clicks the link expecting to mark up the diagram, they'll see a prompt to sign up.

Step 3

With callouts on a static export (Preview, Draw.io, or Visio)

Export the diagram as a PNG or PDF (Lucidchart: File → Export; Draw.io: Extras → Edit Diagram, or File → Export As; Figma: right-click the frame → Copy/Paste as → PNG). On Mac, open the export in Preview and press Shift ⌘ A for the Markup Toolbar — arrows, text boxes, numbered callouts. On Windows, paste into Paint or open in Edge and use the built-in annotation bar. For structured handoff documents, paste the image into Draw.io and add a numbered callout layer on top. The limitation: annotations are baked flat. If the client wants to respond to a specific callout, they'll describe it over email and the ambiguity creeps back in.

Step 4

When the client is the one who needs to annotate

The hardest part of diagram review isn't annotating it yourself — it's getting useful notes back from a client. You export the flowchart, email it as a PNG, and get a reply: 'The middle part looks off.' Which node? Which arrow? The workaround most designers land on: export the diagram as an image or PDF, share it as a browser link, and let the client click the exact shape or region they mean and leave a pinned note. No Lucidchart account, no Miro board invite, no re-downloaded file. Every note lands anchored to the spot they clicked, in a thread you can reply to and resolve.

The faster way

If the goal is to get a client's notes back on a diagram — not just annotate it yourself — skipping the tool's native share is usually faster. Export the diagram (PNG or PDF), drop it into Drafty, and share the link. Your client opens it in their browser, clicks the exact node or arrow they mean, and pins a note right there — no Lucidchart account, no Miro invite, no file going back and forth over email. Every comment lands in a thread anchored to the spot, and you can reply, resolve, and push an updated diagram to the same URL.

Open a live demo

Questions

What is an annotated diagram?
An annotated diagram is a visual — a flowchart, architecture diagram, process map, or org chart — with added labels, callouts, or pinned notes that explain what specific parts mean, flag decisions, or document edge cases. The annotations sit on top of the diagram without changing the underlying shapes.
How do I annotate a diagram in Lucidchart?
Right-click any shape in Lucidchart and choose 'Add comment' to pin a threaded note to it. Collaborators can reply to that comment from within the file. Note that people you share the link with need a Lucidchart account to leave their own comments — viewers without one can see the diagram but not annotate it.
How do I annotate a diagram in Figma or FigJam?
In Figma, press C to switch to the comment tool, then click any element to pin a note to it. In FigJam, use the comment tool (also C) or drop a sticky note. Comments are visible to anyone with file access, but leaving a comment requires a Figma account — clients without one hit a 'Request access' screen.
What is the difference between a diagram annotation and a diagram comment?
An annotation is a note you add to the diagram as the author — explaining intent, labelling a component, or documenting a decision. It's part of the deliverable. A comment is a collaborative note during review — meant to be replied to and resolved. Most diagram tools blur the distinction, but the audience is different: annotations are for anyone reading the diagram, comments are for a specific conversation about a specific change.
How do I share an annotated diagram with a client who doesn't have an account?
Export the diagram as a PNG or PDF and share it via a review link — the client opens it in their browser and annotates the exact spot without signing up for anything. Sending a Lucidchart, Miro, or Figma file link directly means clients without accounts can only view, not comment.
Can I annotate a diagram for free?
Yes. Draw.io (diagrams.net) is fully free and supports text annotations, callout shapes, and tooltip notes. Lucidchart has a free tier that includes comments on basic diagrams. For static exports, Preview on Mac and Edge on Windows both annotate PNGs and PDFs at no cost.

Keep exploring

Stop emailing files back and forth.

Share one link. They comment on the exact spot — no account, always the current version.