feat: add mermaid diagram rendering with interactive viewer

[Benonii]

Problem

Mermaid diagrams in docs were not being recognized and rendered correctly with the current markdown-renderer component.

Fix

Install mermaid package, create a mermaid-diagram.tsx (a use client component) and use it to render mermaid diagrams when they are encountered.

changes

• apps/web/package.json: added "mermaid": "^11.14.0"
• apps/web/src/components/shared/highlighted-code-block.tsx: Changed one function to first check if lang is "mermaid" and return <MermaidDiagram> if that's the case. If not return old function.
• apps/web/src/components/shared/markdown-renderer.tsx: Replace mermaid blocks with placeholder divs but save the code. After the HTML parser runs swap placeholder for real output. Also wraps the div containing HTML with <MermaidBlocks>
• apps/web/src/components/shared/markdown-renderer.tsx: new file. Handles displaying mermaid diagrams inline and with an interactive viewer and copy, expand, pan and zoom buttons
• bun.lock

Before:

After:

[vercel]

@Benonii is attempting to deploy a commit to the better-auth Team on Vercel.

A member of the Team first needs to authorize it.