Merge pull request #3668 from mermaid-js/3659_height_handling

#3659 Adding height when not using maxWidth
mermaid-js · Oct 25, 2022 · 3dca7d1 · 3dca7d1
2 parents 8462813 + 4be6655
commit 3dca7d1
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 20 deletions.
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -56,21 +56,10 @@
   <body>
     <div>Security check</div>
     <pre id="diagram" class="mermaid">
-classDiagram
-        direction LR
-        class Student {
-          -idCard : IdCard
-        }
-        class IdCard{
-          -id : int
-          -name : string
-        }
-        class Bike{
-          -id : int
-          -name : string
-        }
-        Student "1" --o "1" IdCard : carries
-        Student "1" --o "1" Bike : rides
+flowchart TD
+    A --> B
+    B --> C
+    A --> C
     </pre>
     <pre id="diagram" class="mermaid">
 mindmap
@@ -93,8 +82,14 @@
       Pen and paper
       Mermaid
         </pre>
-    <pre id="diagram" class="mermaid2">
-      example-diagram
+    <pre id="diagram" class="mermaid">
+      gantt
+        title Style today marker (vertical line should be 5px wide and half-transparent blue)
+        dateFormat YYYY-MM-DD
+        axisFormat %d
+        todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
+        section Section1
+        Today: 1, -1h
     </pre>
 
     <!-- <div id="cy"></div> -->
@@ -111,13 +106,18 @@
         theme: 'base',
         startOnLoad: true,
         logLevel: 0,
-        // basePath: './packages/',
-        // themeVariables: { darkMode: true },
+        flowchart: {
+          useMaxWidth: false,
+          htmlLabels: true,
+        },
+        gantt: {
+          useMaxWidth: false,
+        },
+        useMaxWidth: false,
         lazyLoadedDiagrams: [
           './mermaid-mindmap-detector.esm.mjs',
           './mermaid-example-diagram-detector.esm.mjs',
         ],
-        // lazyLoadedDiagrams: ['../../mermaid-mindmap/registry.ts'],
       });
       function callback() {
         alert('It worked');

diff --git a/packages/mermaid/src/setupGraphViewbox.js b/packages/mermaid/src/setupGraphViewbox.js
@@ -26,6 +26,7 @@ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
     attrs.set('width', '100%');
     attrs.set('style', `max-width: ${width}px;`);
   } else {
+    attrs.set('height', height);
     attrs.set('width', width);
   }
   return attrs;