Give the mermaid architecture diagrams white subgraph backgrounds - #115
Merged
Conversation
Mermaid's default theme fills subgraphs pale yellow. Style every subgraph in the eventhubs, eventhubs-eventgrid and servicebus diagrams with a white fill, gray border and dark title text, matching the white rounded containers of the Visio-made architecture images. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the Mermaid architecture diagrams in the Event Hubs and Service Bus samples to match the visual style of the other (Visio-based) architecture images by forcing subgraph/cluster containers to render with white backgrounds, gray borders, and dark title text (including improved readability in GitHub dark mode).
Changes:
- Add
styleoverrides for subgraph containers in the Event Hubs Python architecture diagram. - Add
styleoverrides for subgraph containers in the Event Hubs + Event Grid Python architecture diagram. - Add
styleoverrides for subgraph containers in the Service Bus Java architecture diagram.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| samples/servicebus/java/README.md | Styles the host and sbns subgraph containers to use white fill/gray border/dark text. |
| samples/eventhubs/python/README.md | Styles the producers, ehns, funcapp, and storage subgraph containers for consistent white/gray container rendering. |
| samples/eventhubs-eventgrid/python/README.md | Styles the ehns, storage, eventgrid, and funcapp subgraph containers for consistent container rendering and dark-mode readability. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
The 7-step pipeline rendered as a ~6:1 wide ribbon in left-to-right orientation, making labels unreadably small at page width. Top-to-bottom gives a near-square aspect with full-size text, matching the vertical flow of the original ASCII drawing. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
paolosalvatori
added a commit
that referenced
this pull request
Aug 11, 2026
…ds (#116) * 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 <noreply@anthropic.com> * 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 <noreply@anthropic.com> --------- 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
Follow-up to #114. Mermaid's default theme paints subgraph (cluster) backgrounds pale yellow. This adds
styleoverrides to every subgraph in the three diagrams (eventhubs, eventhubs-eventgrid, servicebus/java): white fill, gray border, dark title text — matching the white rounded containers of the Visio-made architecture images used by the other samples.Verified by rendering all three diagrams with mermaid-cli; explicit label text color keeps the titles readable in GitHub dark mode too.
🤖 Generated with Claude Code