fix(docs): make Mermaid lifecycle diagrams readable

[thomhurst]

Fixes #6483

Problem

The "Complete Lifecycle Diagram" on Test Lifecycle Overview was a single flowchart with 32 nodes and 5 nested subgraphs. Mermaid laid it out as a 588 x 6156px column, and in the reporter's browser it degenerated into a ~25px-wide thumbnail.

Root cause of the shape: Mermaid's default flowchart.wrappingWidth is 200px, so most labels wrapped onto 4-5 lines. Combined with 4 levels of nested subgraphs that produced an extremely narrow, extremely tall diagram.

Changes

• Split the monster diagram into three: a scope overview, the hook-order chain, and the per-test flow. Tallest diagram is now 1174px (was 6156px).
• flowchart.wrappingWidth: 400 in themeConfig.mermaid.options so labels stop wrapping onto 4-5 lines.
• Explicit / invisible (~~~) links inside subgraphs so direction TB is honoured — without them Mermaid lays unlinked nodes out in a wide row, which pushed one diagram to 1655px wide.
• Trimmed the per-test sequence diagram (folded Initializers/Disposal participants into Test Instance, shortened two messages) so it no longer shrinks to 57%.
• Node style rules now set an explicit text colour, so highlighted nodes keep contrast in dark mode.
• Scoped benchmark chart CSS to svg[aria-roledescription='xychart'] — it was forcing text { fill } on every Mermaid diagram, including flowcharts and sequence diagrams.

Verification

Built the site and measured every diagram's rendered scale (rendered width ÷ viewBox width) with Playwright:

	before	after
tallest diagram	6156px	1174px
worst scale	0.37	0.84

All 10 diagrams on the page now render at >= 0.84 scale; six render at 1.00. Benchmark xychart styling verified unchanged.

[greptile-apps]

Greptile Summary

Improves Mermaid diagram readability across the documentation site.

• Splits the lifecycle overview into smaller scope, hook-order, and per-test diagrams.
• Increases Mermaid flowchart label wrapping width and adds explicit dark-mode-safe node colors.
• Limits benchmark chart CSS overrides to Mermaid xycharts.

Confidence Score: 5/5

The PR appears safe to merge with no actionable defects identified.

The lifecycle diagrams retain the documented runtime ordering, the xychart selector matches the current Mermaid output, and the configuration and CSS changes are appropriately scoped to the readability problems being addressed.

Important Files Changed

Filename	Overview
docs/docs/writing-tests/lifecycle.md	Reorganizes oversized lifecycle diagrams while preserving the documented lifecycle ordering and scope semantics.
docs/docusaurus.config.ts	Configures a wider Mermaid flowchart wrapping width to reduce excessive label wrapping.
docs/src/css/benchmark-charts.css	Scopes benchmark-specific SVG styling to xycharts so other Mermaid diagram types retain theme-aware colors.

_{Reviews (1): Last reviewed commit: "fix(docs): make Mermaid lifecycle diagra..." | Re-trigger Greptile}

[claude]

Code review

No issues found. Checked for bugs and CLAUDE.md compliance.

This is a docs-only change (Mermaid diagrams, Docusaurus config, CSS) — none of the CLAUDE.md critical rules (dual-mode metadata, snapshot testing, AOT, etc.) apply here since no engine/source-generator code is touched.

A few things I specifically verified while reviewing:

• The split diagrams preserve the same hook/event-receiver ordering as the original monolithic flowchart (cross-checked against the "Complete Test Execution Order" table).
• No dangling references to the removed sequence-diagram participants (Init, Dispose) elsewhere in the file.
• themeConfig.mermaid.options.flowchart.wrappingWidth is the correct Docusaurus/Mermaid config path for this option.
• The CSS selector scoping (svg[aria-roledescription='xychart']) correctly matches all the benchmark pages' xychart-beta blocks, and won't affect the flowchart/sequence diagrams elsewhere in the docs.

Nice, well-verified fix — the before/after scale measurements in the PR description are a good touch.