docs: unify diagram styling and add AI SRE to architecture - #309
Merged
Merged
Conversation
- Convert all user-facing flowcharts to a consistent light palette with dark text for readable, low-contrast, professional diagrams - Add the AI SRE engine, read-only connector layer (Direct Connectors + Private Agents), SRE agent workspace, schedulers, and notifications to the single-location, multi-location, and README architecture diagrams - Apply the light theme to all sequence diagrams so they are colorful and match the architecture diagrams - Add a status-page subscriber notification sequence diagram - Compact the role hierarchy and AI SRE setup diagrams
krish-kant
deleted the
docs/diagrams-consistency-and-sre-architecture
branch
September 16, 2026 09:19
krish-kant
added a commit
that referenced
this pull request
Sep 16, 2026
… + multi-color diagrams (#310) * docs: revert diagram restyle, keep AI SRE in architecture diagrams Reverts the light-palette restyle and sequence-diagram theming introduced in #309, restoring the original diagram design across the user-facing docs (architecture, reliability loop, connectors, status pages, role hierarchy, AI SRE setup, and all sequence diagrams). Keeps only the requested addition, in the original design and palette: the AI SRE engine, the read-only connector layer (Direct Connectors + Private Agents), and the SRE agent workspace in the single-location, multi-location, and README architecture diagrams. * docs: theme sequence diagrams to match architecture and add new ones - Apply a consistent sequence-diagram theme matching the architecture diagrams (indigo actors, amber notes/opt labels, violet activations) - Add detail to existing sequence diagrams (alerts, incidents, jobs, playground, monitor) using the documented behavior - Add new sequence diagrams: - Tests: end-to-end test execution lifecycle - Runs: run lifecycle, live updates, cancellation - Status Pages: subscriber notifications on incident changes - Private Agent: outbound-only registration, heartbeat, lease, result * docs: reorganize architecture diagram and add color to sequence diagrams - Architecture (single-location, multi-location, README): switch to a left-to-right layout grouped into labelled zones (Edge, App, Data, Execution per region, Connector Layer) so elements spread out instead of clustering in one block - Give distinct components distinct colors (app, connectors, private agents, providers, notifications, sandbox, agent workspace); workers and locations keep a shared color - Sequence diagrams: color-code each participant with a distinct fill (transparent actor backgrounds over colored group boxes) so diagrams use multiple colors like the architecture diagram - Make the AI SRE setup flow a single horizontal line * docs: make the role hierarchy diagram compact and horizontal * docs: keep mermaid diagrams readable with scroll + expand Wide or compact diagrams were being scaled down to fit the content column, making labels hard to read. Render every diagram at its natural size (useMaxWidth: false) and let the container scroll horizontally, and add an Expand/Collapse button that opens the diagram full-screen with an Escape shortcut. Applies to all docs diagrams (architecture and small). * docs: make mermaid diagrams readable without an expand control Remove the expand/collapse fullscreen control. Render every diagram at its natural size and let the card scroll horizontally so labels stay readable (previously wide diagrams were scaled down to fit and became hard to read). Small diagrams remain centered. * docs: restore simple architecture diagram and remove diagram scrolling - Revert the Mermaid component to fit-to-width rendering (no horizontal scrolling, no expand control) so every diagram fits without scrolling - Restore the earlier simple top-to-bottom architecture layout for single-location, multi-location, and README, and add just two blocks: AI SRE Engine (App -> SRE) and Private Agents (SRE -.-> Private), which adds height instead of width * docs: clean up sequence diagram colors and readability Remove the heavy full-height colored participant blocks. Use a lighter, readable theme instead: light actor headings with colored borders, colored arrows, amber notes/loops, and violet activations, so text stays visible in both light and dark mode. Applies to all sequence diagrams.
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
1 participant
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
Unifies the user-facing documentation diagrams into one light, low-contrast, professional style, and makes the architecture diagrams an accurate representation of Supercheck by adding AI SRE and the connector layer.
Changes
README.mdarchitecture diagrams previously showed only app + workers + data, with no AI SRE engine, connector layer, or Private Agents. They now show:classDefin the architecture diagrams.Verification
npm run lint(docs) clean;npm run buildsucceeds (TypeScript clean, 154 routes).README.mdarchitecture diagram parses.