#3659 Adding height when not using maxWidth

Merge pull request #3605 from arpansaha13/sidv/fixWindowsPath
Fix windows paths for `docs:build`
2025-09-22 00:40:22 +02:00 · 2022-10-13 14:26:05 +02:00 · 2022-10-13 12:59:07 +05:30 · 2022-10-13 11:29:43 +05:30 · 2022-10-13 00:00:09 +01:00 · 2022-10-12 22:52:41 +00:00
6 changed files with 52 additions and 53 deletions
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -16,9 +16,9 @@ jobs:
    name: 'Docs: Spellcheck'
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
        name: Check out the code
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
        name: Setup node
        with:
          node-version: '16'
--- 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="mermaid2">
 mindmap
@@ -98,8 +87,14 @@ mindmap
        ::icon(mdi mdi-fire)
          gc7((grand<br/>grand<br/>child 8))
        </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> -->
@@ -116,13 +111,18 @@ mindmap
        theme: 'forest',
        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');
--- a/docs/flowchart.md
+++ b/docs/flowchart.md
@@ -315,13 +315,13 @@ flowchart LR
 ### Dotted link

 ```mermaid-example
-flowchart LR;
-   A-.->B;
+flowchart LR
+   A-.->B
 ```

 ```mermaid
-flowchart LR;
-   A-.->B;
+flowchart LR
+   A-.->B
 ```

 ### Dotted link with text
@@ -866,13 +866,13 @@ A shorter form of adding a class is to attach the classname to the node using th
 ```mermaid-example
 flowchart LR
    A:::someclass --> B
-    classDef someclass fill:#f96;
+    classDef someclass fill:#f96
 ```

 ```mermaid
 flowchart LR
    A:::someclass --> B
-    classDef someclass fill:#f96;
+    classDef someclass fill:#f96
 ```

 ### Css classes
@@ -895,14 +895,14 @@ below:
 **Example definition**

 ```mermaid-example
-flowchart LR;
+flowchart LR
    A-->B[AAA<span>BBB</span>]
    B-->D
    class A cssClass
 ```

 ```mermaid
-flowchart LR;
+flowchart LR
    A-->B[AAA<span>BBB</span>]
    B-->D
    class A cssClass
@@ -924,7 +924,7 @@ The icons are accessed via the syntax fa:#icon class name#.
 flowchart TD
    B["fab:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
-    B-->D(fa:fa-spinner);
+    B-->D(fa:fa-spinner)
    B-->E(A fa:fa-camera-retro perhaps?)
 ```

@@ -932,7 +932,7 @@ flowchart TD
 flowchart TD
    B["fab:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
-    B-->D(fa:fa-spinner);
+    B-->D(fa:fa-spinner)
    B-->E(A fa:fa-camera-retro perhaps?)
 ```

--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -35,7 +35,7 @@ import { exec } from 'child_process';
 import { globby } from 'globby';
 import { JSDOM } from 'jsdom';
 import type { Code, Root } from 'mdast';
-import { join, dirname } from 'path';
+import { posix, dirname } from 'path';
 import prettier from 'prettier';
 import { remark } from 'remark';
 // @ts-ignore No typescript declaration file
@@ -210,30 +210,28 @@ const transformHtml = (filename: string) => {
  copyTransformedContents(filename, !verifyOnly, formattedHTML);
 };

+const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
+  return await globby(globs, { dot: true });
+};
+
 /** Main method (entry point) */
 (async () => {
  if (verifyOnly) {
    console.log('Verifying that all files are in sync with the source files');
  }
-  const sourceDirGlob = join('.', SOURCE_DOCS_DIR, '**');
-  const includeFilesStartingWithDot = true;
+  const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**');
+  const action = verifyOnly ? 'Verifying' : 'Transforming';

-  console.log('Transforming markdown files...');
-  const mdFiles = await globby([join(sourceDirGlob, '*.md')], {
-    dot: includeFilesStartingWithDot,
-  });
+  const mdFiles = await getFilesFromGlobs([posix.join(sourceDirGlob, '*.md')]);
+  console.log(`${action} ${mdFiles.length} markdown files...`);
  mdFiles.forEach(transformMarkdown);

-  console.log('Transforming html files...');
-  const htmlFiles = await globby([join(sourceDirGlob, '*.html')], {
-    dot: includeFilesStartingWithDot,
-  });
+  const htmlFiles = await getFilesFromGlobs([posix.join(sourceDirGlob, '*.html')]);
+  console.log(`${action} ${htmlFiles.length} html files...`);
  htmlFiles.forEach(transformHtml);

-  console.log('Transforming all other files...');
-  const otherFiles = await globby([sourceDirGlob, '!**/*.md', '!**/*.html'], {
-    dot: includeFilesStartingWithDot,
-  });
+  const otherFiles = await getFilesFromGlobs([sourceDirGlob, '!**/*.md', '!**/*.html']);
+  console.log(`${action} ${otherFiles.length} other files...`);
  otherFiles.forEach((file: string) => {
    copyTransformedContents(file, !verifyOnly); // no transformation
  });
@@ -244,7 +242,7 @@ const transformHtml = (filename: string) => {
      process.exit(1);
    }
    if (git) {
-      console.log('Adding changes in ${FINAL_DOCS_DIR} folder to git');
+      console.log(`Adding changes in ${FINAL_DOCS_DIR} folder to git`);
      exec('git add docs');
    }
  }
--- a/packages/mermaid/src/docs/flowchart.md
+++ b/packages/mermaid/src/docs/flowchart.md
@@ -198,8 +198,8 @@ flowchart LR
 ### Dotted link

 ```mermaid-example
-flowchart LR;
-   A-.->B;
+flowchart LR
+   A-.->B
 ```

 ### Dotted link with text
@@ -587,7 +587,7 @@ A shorter form of adding a class is to attach the classname to the node using th
 ```mermaid-example
 flowchart LR
    A:::someclass --> B
-    classDef someclass fill:#f96;
+    classDef someclass fill:#f96
 ```

 ### Css classes
@@ -610,7 +610,7 @@ below:
 **Example definition**

 ```mermaid-example
-flowchart LR;
+flowchart LR
    A-->B[AAA<span>BBB</span>]
    B-->D
    class A cssClass
@@ -634,7 +634,7 @@ The icons are accessed via the syntax fa:#icon class name#.
 flowchart TD
    B["fab:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
-    B-->D(fa:fa-spinner);
+    B-->D(fa:fa-spinner)
    B-->E(A fa:fa-camera-retro perhaps?)
 ```

--- 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;
Author	SHA1	Message	Date
Knut Sveidqvist	4be66554b3	#3659 Adding height when not using maxWidth	2022-10-13 14:26:05 +02:00
Sidharth Vinod	57b883c7dd	Merge pull request #3605 from arpansaha13/sidv/fixWindowsPath Fix windows paths for `docs:build`	2022-10-13 12:59:07 +05:30
Sidharth Vinod	af0f0ca526	Merge pull request #3657 from revolter/patch-1 Remove inconsistent and deprecated semicolons	2022-10-13 11:29:43 +05:30
Alois Klink	bc9ed8e1bd	Merge pull request #3646 from mermaid-js/renovate/actions-setup-node-3.x chore(deps): update actions/setup-node action to v3	2022-10-13 00:00:09 +01:00
renovate[bot]	673a2e8228	chore(deps): update actions/setup-node action to v3	2022-10-12 22:52:41 +00:00
Alois Klink	75c67ed948	Merge pull request #3645 from mermaid-js/renovate/actions-checkout-3.x chore(deps): update actions/checkout action to v3	2022-10-12 23:51:51 +01:00
Iulian Onofrei	353895dceb	Remove inconsistent and deprecated semicolons	2022-10-12 23:01:29 +03:00
renovate[bot]	e5c85cbc64	chore(deps): update actions/checkout action to v3	2022-10-11 20:56:31 +00:00
lemontreejs	2bb0cf17d1	refactor: use `posix.join()` instead of replacing `\`	2022-10-09 21:03:57 +05:30
lemontreejs	622b441eb0	fix: docs path in windows	2022-10-08 20:06:57 +05:30
Sidharth Vinod	6f05d4b05a	fix: docs path in windows	2022-10-08 12:16:39 +08:00
Sidharth Vinod	ab5111e84f	fix: Remove hard coded Path separator	2022-10-08 12:16:24 +08:00