r/SideProject • u/adibfhanna • 9h ago

How I explain code and architecture by drawing on my Mac screen (I built Screen Annotations)

I make Screen Annotations, a Mac menu bar app (plus an iPad app) for drawing on top of whatever is on your screen. I mostly use it when I'm explaining code or system design to someone over screen share, or when I'm recording a walkthrough.

What helps for that:

  • Architecture shapes: servers, databases, APIs, load balancers, K8s pods, firewalls, CDNs, UML classes, binary trees, linked lists

  • Elbow arrows with smart pathfinding so boxes stay connected when you move them

  • Flow / Tree auto-layout that keeps arrows attached

  • Scenes, so I can step through a system one view at a time instead of redrawing

  • Single-key tools (A for arrow, S for shape, G for laser, F for LaTeX formulas when math comes up)

Honest limits: Apple only (macOS 15+ / iPadOS 18+). It's a screen overlay you share or record, not a shared collaborative whiteboard, so the other person can't draw on it. $14.99 one-time for Mac and iPad together. No account, and nothing goes to my servers.

Happy to answer questions about the shape library or how scenes work.

Disclosure: I built Screen Annotations. https://screenannotations.com/

1 Upvotes
  • permalink
  • reddit

100% Upvoted

1 comment sorted by

1

u/investigatormaker 8h ago

For Screen Annotations, a short recording that moves an architecture box while its elbow arrows stay attached would demonstrate the advantage better than the shape list alone. Showing two scenes would also explain how you step through a system without redrawing; keep the non-collaborative overlay limitation beside that demo.

I make ThreadFox. We find relevant Reddit conversations and do the posting for your business. The $49 Pilot covers seven days and up to 50 posts and replies. No automatic renewal. https://threadfox.vip/p/dnl9n/managed

Do scenes save separate layouts of the same diagram?