feat: add mermaid graphs rendering

[ptlc8]

See /docs/integrations/sdk/integration/messaging

[greptile-apps]

Greptile Summary

This PR adds client-side Mermaid diagram rendering to the docs site by introducing a new MermaidRenderer.astro component and wiring it into DocsPage.astro. The mermaid library is loaded lazily via dynamic import, so pages without diagrams pay no bundle cost.

• MermaidRenderer.astro: queries for pre[data-language=\"mermaid\"] elements on each page navigation, dynamically imports mermaid, and replaces matched code blocks with the rendered SVG wrapped in a styled container.
• code-copy.ts: gains an early-return guard so that copy/expand buttons are not injected into mermaid blocks before they are replaced.
• DocsPage.astro: mounts <MermaidRenderer /> unconditionally on every docs page (harmless given the lazy import strategy).

Confidence Score: 5/5

Safe to merge for a static docs site where diagram content is fully author-controlled

All changed code paths are straightforward: the mermaid library is lazily imported only when diagrams are actually present, the data-mermaid-rendered guard prevents double rendering across Astro navigations, and the code-copy.ts change correctly skips mermaid blocks. The only notable concern is securityLevel: 'loose', which expands the attack surface compared to Mermaid's default, but is only exploitable by someone who can already commit MDX files to the repository.

src/components/MermaidRenderer.astro — the securityLevel choice warrants a second look

Important Files Changed

Filename	Overview
src/components/MermaidRenderer.astro	New Astro component that dynamically imports Mermaid and renders diagrams client-side; uses securityLevel: 'loose' which is unnecessarily permissive for a static docs site
src/components/DocsPage.astro	Adds unconditional <MermaidRenderer /> mount; mermaid bundle is deferred via dynamic import so page weight is unaffected unless diagrams are present
src/scripts/code-copy.ts	Adds early-return guard to skip copy-button injection for data-language="mermaid" blocks — correct and necessary companion change
src/content/docs/integrations/sdk/integration/messaging.mdx	Demo page for the feature; adds several mermaid diagram code fences as examples
package.json	Adds mermaid ^11.15.0 as a runtime dependency
bun.lock	Lockfile updated to pin mermaid and its transitive deps (e.g. @braintree/sanitize-url, @chevrotain/types)

Sequence Diagram

sequenceDiagram
    participant Browser
    participant AstroRuntime as Astro Runtime
    participant MermaidRenderer as MermaidRenderer.astro (script)
    participant MermaidLib as mermaid (dynamic import)
    participant DOM

    AstroRuntime->>Browser: Page HTML delivered
    Browser->>MermaidRenderer: Script executes (inline)
    MermaidRenderer->>DOM: "querySelectorAll pre[data-language="mermaid"]"
    alt No diagrams found
        MermaidRenderer-->>Browser: return (no import)
    else Diagrams present
        MermaidRenderer->>MermaidLib: await import('mermaid')
        MermaidLib-->>MermaidRenderer: mermaid instance
        MermaidRenderer->>MermaidLib: "mermaid.initialize({ securityLevel: 'loose' })"
        loop For each diagram
            MermaidRenderer->>MermaidLib: mermaid.render(id, source)
            MermaidLib-->>MermaidRenderer: "{ svg }"
            MermaidRenderer->>DOM: "container.innerHTML = svg"
            MermaidRenderer->>DOM: wrapper.replaceWith(container)
        end
    end
    AstroRuntime->>MermaidRenderer: astro:page-load (on navigation)
    MermaidRenderer->>DOM: querySelectorAll (skips data-mermaid-rendered nodes)

Loading

_{Reviews (2): Last reviewed commit: "fix: lazy load mermaid diagrams" | Re-trigger Greptile}

[ptlc8]

@greptileai it's review time

[janelletam]

LGTM!

[linear-code]

DOCS-125