From a3ba1c51b1a1149e2792cbd0823cd6003711e0aa Mon Sep 17 00:00:00 2001 From: Paolo Salvatori Date: Tue, 11 Aug 2026 15:08:19 +0200 Subject: [PATCH 1/2] Make the url-shortener diagram vertical with white subgraph backgrounds The left-to-right layout rendered as a wide ribbon with unreadably small labels at page width, and the subgraphs used mermaid's default pale-yellow fill. Switch to top-to-bottom (near-square aspect, full-size text) and style the subgraphs white with gray borders, matching the treatment the other samples' diagrams received in #115. Co-Authored-By: Claude Fable 5 --- samples/url-shortener/python/README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/samples/url-shortener/python/README.md b/samples/url-shortener/python/README.md index 5d6f0bb..3be25c3 100644 --- a/samples/url-shortener/python/README.md +++ b/samples/url-shortener/python/README.md @@ -23,7 +23,7 @@ The solution is composed of the following Azure resources: - *QrGenerator* ([Queue Storage trigger](https://learn.microsoft.com/en-us/azure/azure-functions/functions-bindings-storage-queue-trigger)): Requests the QR SVG render for the short link. ```mermaid -flowchart LR +flowchart TB user((User)) subgraph webapp["Web App (Flask)"] @@ -68,6 +68,10 @@ flowchart LR user -.->|"3: fetch QR"| qrcodes storage -.->|"transaction metrics"| logs + + style webapp fill:#ffffff,stroke:#999999,color:#333333 + style functions fill:#ffffff,stroke:#999999,color:#333333 + style storage fill:#ffffff,stroke:#999999,color:#333333 ``` The flow of a single link: `POST /shorten` → Table Storage + Key Vault + Service Bus + Queue Storage → workers → internal API → Table Storage + Blob Storage → `GET /l/` → PostgreSQL + 302 redirect. The home page renders the link table with hit counts, signatures, scan verdicts and QR links. From a8a36acc1881ae5827172bdc9e28ff33beb1e29b Mon Sep 17 00:00:00 2001 From: Paolo Salvatori Date: Tue, 11 Aug 2026 15:18:56 +0200 Subject: [PATCH 2/2] Untangle the url-shortener diagram's edge routing The Storage Account subgraph forced links/qrjobs/qrcodes to sit adjacent, so every edge into them shared one corridor and the arcs overlapped and merged. Dissolve that cluster into individually placed nodes labeled "(Storage Account)", group each user journey's edges together, add node/rank spacing, and route the storage metrics edge from the links table. Every edge now runs separately with its label on it. Co-Authored-By: Claude Fable 5 --- samples/url-shortener/python/README.md | 36 ++++++++++++-------------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/samples/url-shortener/python/README.md b/samples/url-shortener/python/README.md index 3be25c3..78323e7 100644 --- a/samples/url-shortener/python/README.md +++ b/samples/url-shortener/python/README.md @@ -23,32 +23,37 @@ The solution is composed of the following Azure resources: - *QrGenerator* ([Queue Storage trigger](https://learn.microsoft.com/en-us/azure/azure-functions/functions-bindings-storage-queue-trigger)): Requests the QR SVG render for the short link. ```mermaid +%%{init: {"flowchart": {"nodeSpacing": 60, "rankSpacing": 80}}}%% flowchart TB user((User)) subgraph webapp["Web App (Flask)"] - shorten["POST /shorten"] follow["GET /l/{code}"] + shorten["POST /shorten"] internal["POST /internal/*
(token-protected)"] end + kv["Key Vault
link-sign-key, pg-conn"] + pg[("PostgreSQL
clicks db")] + sb[["Service Bus
link-events queue"]] + links[("links table
(Storage Account)")] + qrjobs[["qrjobs queue
(Storage Account)"]] + qrcodes[("qrcodes container
(Storage Account, public read)")] + logs["Log Analytics"] + subgraph functions["Function App (worker)"] abuse["AbuseScan
(Service Bus trigger)"] qrgen["QrGenerator
(queue trigger)"] end - subgraph storage["Storage Account"] - links[("links table")] - qrjobs[["qrjobs queue"]] - qrcodes[("qrcodes container
public read")] - end + user -->|"2: follow short link"| follow + user -->|"1: shorten URL"| shorten + user -.->|"3: fetch QR"| qrcodes - kv["Key Vault
link-sign-key, pg-conn"] - sb[["Service Bus
link-events queue"]] - pg[("PostgreSQL
clicks db")] - logs["Log Analytics"] + follow -.->|"read pg-conn"| kv + follow -->|"click row"| pg + follow -->|"hit counter"| links - user -->|"1: shorten URL"| shorten shorten -.->|"read sign key"| kv shorten -->|"write link + sig"| links shorten -->|"link-created event"| sb @@ -61,17 +66,10 @@ flowchart TB internal -->|"scan / qr status"| links internal -->|"QR SVG"| qrcodes - user -->|"2: follow short link"| follow - follow -->|"hit counter"| links - follow -.->|"read pg-conn"| kv - follow -->|"click row"| pg - - user -.->|"3: fetch QR"| qrcodes - storage -.->|"transaction metrics"| logs + links -.->|"transaction metrics
(diagnostic settings)"| logs style webapp fill:#ffffff,stroke:#999999,color:#333333 style functions fill:#ffffff,stroke:#999999,color:#333333 - style storage fill:#ffffff,stroke:#999999,color:#333333 ``` The flow of a single link: `POST /shorten` → Table Storage + Key Vault + Service Bus + Queue Storage → workers → internal API → Table Storage + Blob Storage → `GET /l/` → PostgreSQL + 302 redirect. The home page renders the link table with hit counts, signatures, scan verdicts and QR links.