[tsdebug]

Summary

Mermaid diagram text, borders, lines and arrowheads were very faint in both light and dark mode. The renderer only received background and foreground colors, so the colors it derived had low contrast.

This PR improves the diagrams’ readability while keeping their existing visual style and theme responsiveness.

What changed

• Updated Mermaid to use the documentation theme colors for:
  • Diagram text
  • Connector lines
  • Arrowheads
  • Node borders
  • Node surfaces
  • Muted labels
• Passes the docs theme tokens (muted, line, accent, surface, border) to the Mermaid renderer so diagrams follow the light and dark theme.
• Adds a small .mermaid-diagram-scoped rule that gives edge labels (for example yes/no) an opaque background and foreground-colored text, so connector lines don't show through them.
• Both changes are scoped to Mermaid diagrams and don't affect other SVGs on the site.

Result

Diagram labels and relationships are now easier to see at normal zoom in both light and dark mode, while preserving the distinction between primary text, muted labels, nodes, and connectors.

Validation

• Verified the affected diagrams locally in light mode.
• Verified the affected diagrams locally in dark mode.
• Confirmed that labels, borders, connector lines, and arrowheads are visible.
• MDX generation passed.
• Next.js route type generation passed.
• TypeScript validation passed.
• git diff --check passed.

Fixes #57

[vercel]

@tsdebug is attempting to deploy a commit to the Dibyajyoti's projects Team on Vercel.

A member of the Team first needs to authorize it.

[dbjpanda]

Thanks for your contribution