feat: Use beautiful-mermaid for rendering Mermaid diagrams

[bezbac]

Disclaimer: Experimental PR review

Greptile Summary

This PR replaces the CDN-loaded mermaid.js client-side rendering approach with beautiful-mermaid, a lightweight SSR-compatible library that generates SVGs synchronously without DOM dependencies. It also cleans up manual wrapper divs in the MDX docs and adds CSS class hooks for integrating mermaid diagrams inside the LangTabs shell.

• Mermaid.tsx drops "use client", calls renderMermaidSVG at render time with CSS-variable theming, and falls back to a CodeBlock display on parse failure — eliminating the previous CDN script-injection pattern and enabling SSR.
• style.css adds .mermaid-diagram styles and :has() rules that strip CornerBox chrome (border, background, padding) when a diagram appears inside a LangTabs shell.
• MDX files remove redundant <div className="border rounded p-2"> wrappers that are now handled by the component itself.

Confidence Score: 4/5

Safe to merge — the core rendering change is well-structured and the new library is purpose-built for SSR use. The two style-level issues (conflicting Tailwind classes and a stray indentation) are cosmetic and don't affect functionality.

The migration from CDN-loaded mermaid to beautiful-mermaid is clean and the fallback path is handled correctly. The conflicting rounded-lg/rounded-none classes in Mermaid.tsx are inert in practice (Tailwind's CSS ordering ensures rounded-none wins) but are misleading. The indentation inconsistency in LangTabs.tsx is purely cosmetic. No logic or data-integrity concerns were found.

components/Mermaid.tsx — conflicting border-radius utilities; components/LangTabs.tsx — stray indentation on the return statement.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[MDX Page renders mermaid code block] --> B[Mermaid component receives chart string]
    B --> C{renderMermaidSVG\nbeautiful-mermaid}
    C -- success --> D[Returns SVG string\nwith CSS-variable theming]
    C -- throws --> E[Fallback: CodeBlock\nwith raw chart text]
    D --> F[dangerouslySetInnerHTML\ninjects SVG into div.mermaid-diagram]
    F --> G{Inside LangTabs?}
    G -- yes --> H[CSS :has rule strips\nCornerBox chrome]
    G -- no --> I[Normal bordered\ndiagram container]

Loading

Prompt To Fix All With AI

Fix the following 3 code review issues. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 3
components/Mermaid.tsx:25
The className contains both `rounded-lg` and `rounded-none`, which are conflicting Tailwind utilities targeting the same CSS property. While Tailwind's stylesheet ordering means `rounded-none` (alphabetically later) typically wins, the presence of `rounded-lg` is dead/misleading code and can produce unexpected behavior depending on the Tailwind version or configuration. Since the intent appears to be no border radius (matching the `.mermaid-diagram` style context), `rounded-lg` should be removed.

```suggestion
        className="mermaid-diagram my-4 overflow-x-auto border p-4 not-prose rounded-none"
```

### Issue 2 of 3
components/LangTabs.tsx:169-171
The `return` keyword on line 169 is indented with 4 spaces, while the rest of the function body consistently uses 2-space indentation. This is a minor formatting inconsistency likely introduced during the refactor.

```suggestion
  return (
    <div ref={containerRef}>
      <CornerBox className="lang-tabs-shell">
```

### Issue 3 of 3
components/Mermaid.tsx:19-26
`interactive: true` instructs `beautiful-mermaid` to embed event handlers (click/hover) directly in the SVG, which is then injected via `dangerouslySetInnerHTML`. The library is relatively new (~2 months old, v1.1.3) and its SVG sanitization behaviour is not yet widely vetted. Because the mermaid source comes from developer-authored MDX rather than user input the practical risk is low, but it's worth confirming the library strips or escapes any unexpected constructs in the SVG output — especially with the `interactive` flag enabled.

_{Reviews (1): Last reviewed commit: "feat: Use beautiful-mermaid for renderin..." | Re-trigger Greptile}

Greptile also left 1 inline comment on this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
langfuse-docs	Ready	Preview, Comment	May 10, 2026 7:03pm

[github-actions]

@claude review