Support ZenUML diagrams in Mermaid (#903)

gregberge · web-flow · commit bddebd805d80 · 2025-07-07T21:01:14.000+05:30
diff --git a/.changeset/honest-spiders-feel.md b/.changeset/honest-spiders-feel.md
@@ -0,0 +1,5 @@
+---
+'@gitbook/integration-mermaid': minor
+---
+
+Support ZenUML diagrams in Mermaid
diff --git a/integrations/mermaid/src/index.tsx b/integrations/mermaid/src/index.tsx
@@ -76,6 +76,8 @@ export default createIntegration({
                 <body>
                     <script type="module">
                         import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+                        import zenuml from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml@0.2.0/dist/mermaid-zenuml.esm.min.mjs';
+                        await mermaid.registerExternalDiagrams([zenuml]);
                         mermaid.initialize({ startOnLoad: false });
 
                         const queue = [];
@@ -113,7 +115,9 @@ export default createIntegration({
 
                             document.getElementById('content').innerHTML = svgGraph;
                             const svg = document.getElementById('content').querySelector('svg');
-                            const size = { width: svg.viewBox.baseVal.width, height: svg.viewBox.baseVal.height };
+                            const size = svg.viewBox.baseVal.width && svg.viewBox.baseVal.height
+                                ? { width: svg.viewBox.baseVal.width, height: svg.viewBox.baseVal.height }
+                                : { width: parseInt(svg.style.width, 10), height: parseInt(svg.style.height, 10) };
 
                             console.log('mermaid: resize', size);
                             sendAction({

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@gitbook/integration-mermaid': minor
 +---
++
 +Support ZenUML diagrams in Mermaid