diff --git a/.changeset/mermaid-label-clipping.md b/.changeset/mermaid-label-clipping.md
new file mode 100644
index 000000000..3dffd259e
--- /dev/null
+++ b/.changeset/mermaid-label-clipping.md
@@ -0,0 +1,5 @@
+---
+"@alauda/doom": patch
+---
+
+Fix clipped Mermaid labels by measuring diagrams inside their display container. This keeps label dimensions consistent with the documentation page's typography, including multiline labels.
diff --git a/packages/doom/src/runtime/components/Mermaid.tsx b/packages/doom/src/runtime/components/Mermaid.tsx
index 2f2b13bb2..cfec85b72 100644
--- a/packages/doom/src/runtime/components/Mermaid.tsx
+++ b/packages/doom/src/runtime/components/Mermaid.tsx
@@ -21,9 +21,11 @@ export const Mermaid = ({ className, children }: MermaidProps) => {
     mermaid.initialize({ theme: isDark ? 'dark' : 'default' })
 
     const render = async () => {
+      // Measure labels with the same document styles used to display the SVG.
       const { svg, diagramType, bindFunctions } = await mermaid.render(
         `mermaid-${id.slice(1, -1)}`,
         children,
+        container,
       )
 
       container.classList.add(diagramType)