Make the url-shortener diagram vertical with white subgraph backgrounds - #116
Merged
Conversation
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 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the url-shortener sample’s architecture diagram to match the readability and styling approach used in other samples: the mermaid flowchart is switched to a top-to-bottom layout and subgraphs are styled with white backgrounds and neutral borders/text.
Changes:
- Switched the mermaid diagram direction from
flowchart LRtoflowchart TBfor improved readability at typical page widths. - Added
styleoverrides for thewebapp,functions, andstoragesubgraphs to use white fill with gray borders and dark title text.
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
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 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Applies the same treatment to the url-shortener mermaid diagram that #115 gave the other samples:
flowchart LR→flowchart TB: the diagram was a wide ribbon whose labels became unreadably small when scaled to page width; top-to-bottom renders near-square with full-size text.fill:#ffffff, gray border, dark title text) instead of mermaid's default pale yellow, matching the white rounded containers of the Visio-made architecture images.Verified by rendering with mermaid-cli.
🤖 Generated with Claude Code