From 9466fa6f56ef32ed65d9061f9a8abe5613638573 Mon Sep 17 00:00:00 2001 From: ysyou Date: Fri, 30 Oct 2026 05:56:03 +0000 Subject: [PATCH] fix(mermaid): measure labels in the display container --- .changeset/mermaid-label-clipping.md | 5 +++++ packages/doom/src/runtime/components/Mermaid.tsx | 2 ++ 2 files changed, 7 insertions(+) create mode 100644 .changeset/mermaid-label-clipping.md 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)