Diagram options for the AI agent case study

Christian: the current ASCII diagram renders tiny on mobile. Three replacement options below, all inline SVG (no JS dependency, edits in the markdown source, renders identically on desktop and mobile). Pick one and I ship. Or say "none of these" and I try a Gemini-generated illustrated version.

Current state (for reference)

This is what ships today. Tiny, no color, no visual hierarchy. Legible but not memorable.
customer email | v [hi@<their-domain>.com IMAP mailbox] | | (MailBridge polls every 5 min) v [MailBridge worker] ---- signed webhook (HMAC-SHA256) ----> [operator's review agent] | (the agent drafts a reply) | v [draft proposed in Telegram chat] | (operator replies "send") | v [POST /api/v1/connections/:id/send] | v [MailBridge submits via source SMTP] | v reply lands in customer's inbox + appears in Sent folder of hi@<their-domain>

Option A: Clean vertical SVG (brand colors, 3 phases)

Three color-coded phase cards (INBOUND / AGENT / OUTBOUND) stacked vertically. Each card shows its steps. Arrows between cards signal flow. Fits mobile natively (SVG scales). Feels professional.
INBOUND 1. Customer sends email to hi@their-domain.com 2. MailBridge worker polls the mailbox every 5 min 3. Signed webhook (HMAC-SHA256) fires to operator's endpoint 4. Full message body + attachments arrive as JSON AGENT ON A CLOUD SERVER 5. Agent reads message + prior thread history + product KB 6. Agent proposes a draft reply in a Telegram chat 7. Operator taps phone, types "send" (or "discard", or iterate) Optional loop. Full-auto sends without this step. OUTBOUND 8. Agent calls POST /api/v1/connections/:id/send 9. MailBridge submits via the source mailbox's own SMTP 10. Reply lands in customer's inbox, carries the source DKIM 11. Message appears in the mailbox's Sent folder MailBridge is the only third-party service in the loop.

Option B: Compact horizontal (3 columns)

Left-to-right flow: source → agent → destination. Works on wide screens; on mobile it scales down (SVG viewBox). More at-a-glance, less detail per step.
Customer emails Source mailbox hi@their-domain.com IMAP MailBridge worker polls every 5 min HMAC-signed webhook Agent (cloud) drafts reply posts to Telegram waits for operator operator: "send" POST /api/v1/connections/:id/send MailBridge submits via source SMTP Reply in customer inbox source DKIM, threaded, in Sent folder Blue = MailBridge · Purple = your agent · Green = delivery

Option C: Hand-drawn (Excalidraw aesthetic)

Same content as Option A but with a rough, playful hand-drawn look. Feels artisanal, less corporate. Good for HN/blog audiences.
📥 Inbound 1. Customer emails hi@their-domain.com 2. MailBridge polls every 5 min 3. Signed webhook → operator's endpoint 4. Full message + attachments as JSON 🤖 Agent on a cloud server 5. Reads message + thread history + KB 6. Proposes draft in Telegram chat 💬 7. Operator taps phone → types "send" (optional loop; full-auto skips this) 📤 Outbound 8. POST /api/v1/connections/:id/send 9. MailBridge submits via source SMTP 10. Reply lands with source DKIM ✅ 11. Message appears in Sent folder

Comparison

AspectCurrent ASCIIA: Clean SVGB: HorizontalC: Hand-drawn
Mobile legibilityPoorExcellentGood (scales)Excellent
Visual polishNoneProfessionalProfessionalPlayful
HN/tech-audience fitOKStrongStrongVery strong (differentiator)
Editable in markdown sourceYesYes (inline SVG)Yes (inline SVG)Yes (inline SVG)
Extra dependenciesNoneNoneNoneNone
Bytes added~0.7kb~3.5kb~3kb~3.5kb

My recommendation

Option A (Clean vertical SVG). Fits HN's audience without feeling corporate. Reads top-to-bottom which matches how mobile users scroll. The three phase strips make the pipeline shape obvious in one glance. Inline in the markdown so I can edit it if the pipeline changes.

If you want more personality, Option C. If you want the widest desktop use of horizontal space, Option B.

Tell me A, B, C, or "try Gemini for an illustrated version" and I ship.