#3659 Adding height when not using maxWidth

Merge pull request #3605 from arpansaha13/sidv/fixWindowsPath
Fix windows paths for `docs:build`
2025-09-30 20:59:36 +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
28 changed files with 132 additions and 261 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/.gitignore
+++ b/.gitignore
@@ -32,5 +32,3 @@ cypress/snapshots/
 .eslintcache
 .tsbuildinfo
 tsconfig.tsbuildinfo
-
-local*.html
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -6,7 +6,6 @@ import pkg from '../package.json' assert { type: 'json' };

 const { dependencies } = pkg;
 const watch = process.argv.includes('--watch');
-const mermaidOnly = process.argv.includes('--mermaid');
 const __dirname = fileURLToPath(new URL('.', import.meta.url));

 type OutputOptions = Exclude<
@@ -130,19 +129,14 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
 const main = async () => {
  const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
  for (const pkg of packageNames) {
-    if (mermaidOnly && pkg !== 'mermaid') {
-      continue;
-    }
    await buildPackage(pkg);
  }
 };

 if (watch) {
-  build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' }));
-  if (!mermaidOnly) {
-    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
-    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
-  }
+  build(getBuildConfig({ minify: false, watch, entryName: 'mermaid' }));
+  build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
+  build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
 } else {
  void main();
 }
--- 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
@@ -264,20 +264,6 @@ flowchart LR
    A --- B
 ```

-### An invisisble link
-
-This can be a usefull tool in some instances where you want to alter the default positining of a node.
-
-```mermaid-example
-flowchart LR
-    A ~~~ B
-```
-
-```mermaid
-flowchart LR
-    A ~~~ B
-```
-
 ### Text on links

 ```mermaid-example
@@ -329,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
@@ -880,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
@@ -909,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
@@ -938,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?)
 ```

@@ -946,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/docs/mindmap.md
+++ b/docs/mindmap.md
@@ -26,6 +26,7 @@ mindmap
    Tools
      Pen and paper
      Mermaid
+
 ```

 ```mermaid
@@ -46,13 +47,14 @@ mindmap
    Tools
      Pen and paper
      Mermaid
+
 ```

 ## Syntax

 The syntax for creating Mindmaps is simple and relies on indentation for setting the levels in the hierarchy.

-In the following example you can see how there are 3 different levels of indentation. The leftmost indentation is the root of the mindmap. There can only be one root and if you by misstake add two of them on the same level there will be a syntax error. Rows with larger indentation will be connected as children to the previous row with lower indentation. Based on that you can see in the example how the nodes B and C both are children to node A whci in turn is a child of the node Root.
+In the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further then the previous lines defining the nodes B and C.

    mindmap
        Root
@@ -60,7 +62,7 @@ In the following example you can see how there are 3 different levels of indenta
                B
                C

-In the diagram below you can see the example rendered as a mindmap.
+In summary is a simple text outline where there are one node at the root level called `Root` which has one child `A`. `A` in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.

 ```mermaid-example
 mindmap
@@ -218,7 +220,7 @@ The actual indentation does not really matter only compared with the previous ro
                B
              C

-This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Mermaid will rely on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.
+This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.

 ```mermaid-example
 mindmap
--- a/package.json
+++ b/package.json
@@ -26,9 +26,8 @@
    "git graph"
  ],
  "scripts": {
-    "build:mermaid": "ts-node-esm --transpileOnly --project=.vite/tsconfig.json .vite/build.ts --mermaid",
    "build:vite": "ts-node-esm --transpileOnly --project=.vite/tsconfig.json .vite/build.ts",
-    "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-mindmap/tsconfig.json --emitDeclarationOnly",
+    "build:types": "concurrently \"tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly\" \"tsc -p ./packages/mermaid-mindmap/tsconfig.json --emitDeclarationOnly\"",
    "build:watch": "pnpm build:vite --watch",
    "build": "pnpm run -r clean && concurrently \"pnpm build:vite\" \"pnpm build:types\"",
    "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
--- a/packages/mermaid-mindmap/package.json
+++ b/packages/mermaid-mindmap/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/mermaid-mindmap",
-  "version": "9.2.0-rc4",
+  "version": "9.2.0-rc2",
  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
  "main": "dist/mermaid-mindmap.core.mjs",
  "module": "dist/mermaid-mindmap.core.mjs",
@@ -58,7 +58,6 @@
  },
  "devDependencies": {
    "concurrently": "^7.4.0",
-    "mermaid": "workspace:*",
    "rimraf": "^3.0.2"
  },
  "resolutions": {
--- a/packages/mermaid-mindmap/src/mermaidUtils.ts
+++ b/packages/mermaid-mindmap/src/mermaidUtils.ts
@@ -1,5 +1,3 @@
-import type { MermaidConfig } from 'mermaid';
-
 const warning = (s: string) => {
  // Todo remove debug code
  console.error('Log function was called before initialization', s); // eslint-disable-line
@@ -26,7 +24,7 @@ export const log: Record<keyof typeof LEVELS, typeof console.log> = {
 };

 export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
-export let getConfig: () => MermaidConfig;
+export let getConfig: () => object;
 export let sanitizeText: (str: string) => string;
 // eslint-disable @typescript-eslint/no-explicit-any
 export let setupGraphViewbox: (
--- a/packages/mermaid-mindmap/src/mindmapDb.js
+++ b/packages/mermaid-mindmap/src/mindmapDb.js
@@ -1,28 +1,16 @@
-/** Created by knut on 23-07-2022. */
+/** Created by knut on 15-01-14. */
 import { sanitizeText, getConfig, log } from './mermaidUtils';
-import type { DetailedError } from 'mermaid';

-interface Node {
-  id: number;
-  nodeId: string;
-  level: number;
-  descr: string;
-  type: number;
-  children: Node[];
-  width: number;
-  padding: number;
-  icon?: string;
-  class?: string;
-}
-
-let nodes: Node[] = [];
+let nodes = [];
 let cnt = 0;
+let elements = {};
 export const clear = () => {
  nodes = [];
  cnt = 0;
+  elements = {};
 };

-const getParent = function (level: number) {
+const getParent = function (level) {
  for (let i = nodes.length - 1; i >= 0; i--) {
    if (nodes[i].level < level) {
      return nodes[i];
@@ -35,21 +23,28 @@ const getParent = function (level: number) {
 export const getMindmap = () => {
  return nodes.length > 0 ? nodes[0] : null;
 };
-
-export const addNode = (level: number, id: string, descr: string, type: number) => {
+export const addNode = (level, id, descr, type) => {
  log.info('addNode', level, id, descr, type);
  const conf = getConfig();
-  const padding = conf.mindmap?.padding ?? 15;
-  const node: Node = {
+  const node = {
    id: cnt++,
    nodeId: sanitizeText(id),
    level,
    descr: sanitizeText(descr),
    type,
    children: [],
-    width: getConfig().mindmap?.maxNodeWidth ?? 200,
-    padding: type === nodeType.ROUNDED_RECT || type === nodeType.RECT ? 2 * padding : padding,
+    width: getConfig().mindmap.maxNodeWidth,
  };
+  switch (node.type) {
+    case nodeType.ROUNDED_RECT:
+      node.padding = 2 * conf.mindmap.padding;
+      break;
+    case nodeType.RECT:
+      node.padding = 2 * conf.mindmap.padding;
+      break;
+    default:
+      node.padding = conf.mindmap.padding;
+  }
  const parent = getParent(level);
  if (parent) {
    parent.children.push(node);
@@ -61,10 +56,9 @@ export const addNode = (level: number, id: string, descr: string, type: number)
      nodes.push(node);
    } else {
      // Syntax error ... there can only bee one root
-      const error = new Error(
+      let error = new Error(
        'There can be only one root. No parent could be found for ("' + node.descr + '")'
      );
-      // @ts-ignore TODO: Add mermaid error
      error.hash = {
        text: 'branch ' + name,
        token: 'branch ' + name,
@@ -87,7 +81,7 @@ export const nodeType = {
  BANG: 5,
 };

-export const getType = (startStr: string, endStr: string): number => {
+export const getType = (startStr, endStr) => {
  log.debug('In get type', startStr, endStr);
  switch (startStr) {
    case '[':
@@ -105,7 +99,11 @@ export const getType = (startStr: string, endStr: string): number => {
  }
 };

-export const decorateNode = (decoration: { icon: string; class: string }) => {
+export const setElementForId = (id, element) => {
+  elements[id] = element;
+};
+
+export const decorateNode = (decoration) => {
  const node = nodes[nodes.length - 1];
  if (decoration && decoration.icon) {
    node.icon = sanitizeText(decoration.icon);
@@ -115,7 +113,7 @@ export const decorateNode = (decoration: { icon: string; class: string }) => {
  }
 };

-export const type2Str = (type: number) => {
+export const type2Str = (type) => {
  switch (type) {
    case nodeType.DEFAULT:
      return 'no-border';
@@ -134,13 +132,13 @@ export const type2Str = (type: number) => {
  }
 };

-export type ParseErrorFunction = (err: string | DetailedError, hash?: any) => void;
-export let parseError: ParseErrorFunction;
-export const setErrorHandler = (handler: ParseErrorFunction) => {
+export let parseError;
+export const setErrorHandler = (handler) => {
  parseError = handler;
 };

 // Expose logger to grammar
 export const getLogger = () => log;

-export const getNodeById = (id: number): Node => nodes[id];
+export const getNodeById = (id) => nodes[id];
+export const getElementById = (id) => elements[id];
--- a/packages/mermaid-mindmap/src/mindmapRenderer.js
+++ b/packages/mermaid-mindmap/src/mindmapRenderer.js
@@ -1,9 +1,10 @@
-/** Created by knut on 23-07-2022. */
+/** Created by knut on 14-12-11. */
 import { select } from 'd3';
 import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
-import svgDraw, { getElementById, clearElementRefs } from './svgDraw';
+import svgDraw from './svgDraw';
 import cytoscape from 'cytoscape';
 import coseBilkent from 'cytoscape-cose-bilkent';
+import * as db from './mindmapDb';

 // Inject the layout algorithm into cytoscape
 cytoscape.use(coseBilkent);
@@ -33,7 +34,7 @@ function drawNodes(svg, mindmap, section, conf) {
 * @param cy
 */
 function drawEdges(edgesEl, cy) {
-  cy?.edges().map((edge, id) => {
+  cy.edges().map((edge, id) => {
    const data = edge.data();
    if (edge[0]._private.bodyBounds) {
      const bounds = edge[0]._private.rscratch;
@@ -99,10 +100,9 @@ function addNodes(mindmap, cy, conf, level) {
 */
 function layoutMindmap(node, conf) {
  return new Promise((resolve) => {
-    // if (node.children.length === 0) {
-    //   resolve(node);
-    //   return;
-    // }
+    if (node.children.length === 0) {
+      return node;
+    }

    // Add temporary render element
    const renderEl = select('body').append('div').attr('id', 'cy').attr('style', 'display:none');
@@ -154,7 +154,7 @@ function positionNodes(cy) {
    data.x = node.position().x;
    data.y = node.position().y;
    svgDraw.positionNode(data);
-    const el = getElementById(data.nodeId);
+    const el = db.getElementById(data.nodeId);
    log.info('Id:', id, 'Position: (', node.position().x, ', ', node.position().y, ')', data);
    el.attr(
      'transform',
@@ -178,7 +178,6 @@ export const draw = async (text, id, version, diagObj) => {

  // This is done only for throwing the error if the text is not valid.
  diagObj.db.clear();
-  clearElementRefs();
  // Parse the graph definition
  diagObj.parser.parse(text);

--- a/packages/mermaid-mindmap/src/styles.js
+++ b/packages/mermaid-mindmap/src/styles.js
@@ -27,7 +27,6 @@ const genSections = (options) => {
    .node-icon-${i - 1} {
      font-size: 40px;
      color: ${options['cScaleLabel' + i]};
-      // fill: ${options['cScaleLabel' + i]};
      // color: ${options['gitInv' + i]};
    }
    .section-edge-${i - 1}{
@@ -37,7 +36,7 @@ const genSections = (options) => {
      stroke-width: ${sw};
    }
    .section-${i - 1} line {
-      stroke: ${options['cScaleInv' + i]} ;
+      stroke: ${options['lineColor' + i]} ;
      stroke-width: 3;
    }

--- a/packages/mermaid-mindmap/src/svgDraw.js
+++ b/packages/mermaid-mindmap/src/svgDraw.js
@@ -259,7 +259,7 @@ export const drawNode = function (elem, node, fullSection, conf) {
  // if (typeof node.x !== 'undefined' && typeof node.y !== 'undefined') {
  //   nodeElem.attr('transform', 'translate(' + node.x + ',' + node.y + ')');
  // }
-  setElementById(node.id, nodeElem);
+  db.setElementForId(node.id, nodeElem);
  return node.height;
 };

@@ -286,7 +286,7 @@ export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, ful
 };

 export const positionNode = function (node) {
-  const nodeElem = getElementById(node.id);
+  const nodeElem = db.getElementById(node.id);

  const x = node.x || 0;
  const y = node.y || 0;
@@ -294,18 +294,4 @@ export const positionNode = function (node) {
  nodeElem.attr('transform', 'translate(' + x + ',' + y + ')');
 };

-let elements = {};
-
-const setElementById = (id, element) => {
-  elements[id] = element;
-};
-
-export const getElementById = (id) => {
-  return elements[id];
-};
-
-export const clearElementRefs = () => {
-  elements = {};
-};
-
 export default { drawNode, positionNode, drawEdge };
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -1,6 +1,6 @@
 import * as configApi from './config';
 import { log } from './logger';
-import { DiagramNotFoundError, getDiagram, registerDiagram } from './diagram-api/diagramAPI';
+import { getDiagram, registerDiagram } from './diagram-api/diagramAPI';
 import { detectType, getDiagramLoader } from './diagram-api/detectType';
 import { isDetailedError } from './utils';
 export class Diagram {
@@ -88,13 +88,9 @@ export const getDiagramFromText = async (txt: string, parseError?: Function): Pr
    // Trying to find the diagram
    getDiagram(type);
  } catch (error) {
-    if (!(error instanceof DiagramNotFoundError)) {
-      log.error(error);
-      throw error;
-    }
    const loader = getDiagramLoader(type);
    if (!loader) {
-      throw new Error(`Loader for ${type} not found.`);
+      throw new Error(`Diagram ${type} not found.`);
    }
    // Diagram not available, loading it
    const { diagram } = await loader();
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -438,9 +438,6 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
    case 'thick':
      strokeClasses = 'edge-thickness-thick';
      break;
-    case 'invisible':
-      strokeClasses = 'edge-thickness-thick';
-      break;
    default:
      strokeClasses = '';
  }
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -34,14 +34,8 @@ export const registerDiagram = (
    _setupGraphViewbox: any
  ) => void
 ) => {
-  log.debug(`Registering diagram ${id}`);
  if (diagrams[id]) {
-    log.warn(`Diagram ${id} already registered.`);
-    // The error throw is commented out to as it breaks pages where you have multiple diagrams,
-    // it can happen that rendering of the same type of diagram is initiated while the previous
-    // one is still being imported. import deals with this and only one diagram is imported in
-    // the end.
-    // throw new Error(`Diagram ${id} already registered.`);
+    throw new Error(`Diagram ${id} already registered.`);
  }
  diagrams[id] = diagram;
  if (detector) {
@@ -51,19 +45,11 @@ export const registerDiagram = (
  if (typeof callback !== 'undefined') {
    callback(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox);
  }
-  log.debug(`Registered diagram ${id}. ${Object.keys(diagrams).join(', ')} diagrams registered.`);
 };

 export const getDiagram = (name: string): DiagramDefinition => {
-  log.debug(`Getting diagram ${name}. ${Object.keys(diagrams).join(', ')} diagrams registered.`);
  if (name in diagrams) {
    return diagrams[name];
  }
-  throw new DiagramNotFoundError(name);
+  throw new Error(`Diagram ${name} not found.`);
 };
-
-export class DiagramNotFoundError extends Error {
-  constructor(message: string) {
-    super(`Diagram ${message} not found.`);
-  }
-}
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -456,8 +456,8 @@ export const defaultStyle = function () {
 export const addSubGraph = function (_id, list, _title) {
  // console.log('addSubGraph', _id, list, _title);
  let id = _id.trim();
-  let title = _title.trim();
-  if (id === title && title.match(/\s/)) {
+  let title = _title;
+  if (_id === _title && _title.match(/\s/)) {
    id = undefined;
  }
  /** @param a */
@@ -674,10 +674,6 @@ const destructEndLink = (_str) => {
    stroke = 'thick';
  }

-  if (line[0] === '~') {
-    stroke = 'invisible';
-  }
-
  let dots = countChar('.', line);

  if (dots) {
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -280,11 +280,6 @@ export const addEdges = function (edges, g, diagObj) {
        edgeData.pattern = 'solid';
        edgeData.style = 'stroke-width: 3.5px;fill:none;';
        break;
-      case 'invisible':
-        edgeData.thickness = 'invisible';
-        edgeData.pattern = 'solid';
-        edgeData.style = 'stroke-width: 0;fill:none;';
-        break;
    }
    if (typeof edge.style !== 'undefined') {
      const styles = getStylesFromArray(edge.style);
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -120,7 +120,6 @@ that id.
 \s*[xo<]?\-\-+[-xo>]\s*     return 'LINK';
 \s*[xo<]?\=\=+[=xo>]\s*     return 'LINK';
 \s*[xo<]?\-?\.+\-[xo>]?\s*  return 'LINK';
-\s*\~\~[\~]+\s*  return 'LINK';
 \s*[xo<]?\-\-\s*            return 'START_LINK';
 \s*[xo<]?\=\=\s*            return 'START_LINK';
 \s*[xo<]?\-\.\s*            return 'START_LINK';
--- 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
@@ -167,15 +167,6 @@ flowchart LR
    A --- B
 ```

-### An invisisble link
-
-This can be a usefull tool in some instances where you want to alter the default positining of a node.
-
-```mermaid-example
-flowchart LR
-    A ~~~ B
-```
-
 ### Text on links

 ```mermaid-example
@@ -207,8 +198,8 @@ flowchart LR
 ### Dotted link

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

 ### Dotted link with text
@@ -596,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
@@ -619,7 +610,7 @@ below:
 **Example definition**

 ```mermaid-example
-flowchart LR;
+flowchart LR
    A-->B[AAA<span>BBB</span>]
    B-->D
    class A cssClass
@@ -643,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/docs/mindmap.md
+++ b/packages/mermaid/src/docs/mindmap.md
@@ -24,13 +24,14 @@ mindmap
    Tools
      Pen and paper
      Mermaid
+
 ```

 ## Syntax

 The syntax for creating Mindmaps is simple and relies on indentation for setting the levels in the hierarchy.

-In the following example you can see how there are 3 different levels of indentation. The leftmost indentation is the root of the mindmap. There can only be one root and if you by misstake add two of them on the same level there will be a syntax error. Rows with larger indentation will be connected as children to the previous row with lower indentation. Based on that you can see in the example how the nodes B and C both are children to node A whci in turn is a child of the node Root.
+In the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further then the previous lines defining the nodes B and C.

 ```
 mindmap
@@ -40,7 +41,7 @@ mindmap
            C
 ```

-In the diagram below you can see the example rendered as a mindmap.
+In summary is a simple text outline where there are one node at the root level called `Root` which has one child `A`. `A` in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.

 ```mermaid
 mindmap
@@ -144,7 +145,7 @@ mindmap
          C
 ```

-This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Mermaid will rely on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.
+This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.

 ```mermaid
 mindmap
--- a/packages/mermaid/src/logger.ts
+++ b/packages/mermaid/src/logger.ts
@@ -30,8 +30,6 @@ export const log: Record<keyof typeof LEVELS, typeof console.log> = {
 * @param {LogLevel} [level="fatal"] The level to set the logging to. Default is `"fatal"`
 */
 export const setLogLevel = function (level: keyof typeof LEVELS | number | string = 'fatal') {
-  // TODO: Even if we call initialize with loglevel 0, many initial logs are skipped as LL is set to 5 initially.
-
  let numericLevel: number = LEVELS.fatal;
  if (typeof level === 'string') {
    level = level.toLowerCase();
@@ -41,7 +39,6 @@ export const setLogLevel = function (level: keyof typeof LEVELS | number | strin
  } else if (typeof level === 'number') {
    numericLevel = level;
  }
-
  log.trace = () => {};
  log.debug = () => {};
  log.info = () => {};
--- a/packages/mermaid/src/mermaid.spec.ts
+++ b/packages/mermaid/src/mermaid.spec.ts
@@ -48,32 +48,11 @@ describe('when using mermaid and ', function () {
      const node = document.createElement('div');
      node.appendChild(document.createTextNode('graph TD;\na;'));

-      await mermaid.initThrowsErrors(undefined, node);
+      mermaid.initThrowsErrors(undefined, node);
      // mermaidAPI.render function has been mocked, since it doesn't yet work
      // in Node.JS (only works in browser)
      expect(mermaidAPI.render).toHaveBeenCalled();
    });
-    it('should throw error (but still render) if lazyLoadedDiagram fails', async () => {
-      const node = document.createElement('div');
-      node.appendChild(document.createTextNode('graph TD;\na;'));
-
-      mermaidAPI.setConfig({
-        lazyLoadedDiagrams: ['this-file-does-not-exist.mjs'],
-      });
-      await expect(mermaid.initThrowsErrors(undefined, node)).rejects.toThrowError(
-        // this error message is probably different on every platform
-        // this one is just for vite-note (node/jest/browser may be different)
-        'Failed to load this-file-does-not-exist.mjs'
-      );
-
-      // should still render, even if lazyLoadedDiagrams fails
-      expect(mermaidAPI.render).toHaveBeenCalled();
-    });
-
-    afterEach(() => {
-      // we modify mermaid config in some tests, so we need to make sure to reset them
-      mermaidAPI.reset();
-    });
  });

  describe('checking validity of input ', function () {
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -2,14 +2,13 @@
 * Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid
 * functionality and to render the diagrams to svg code!
 */
-import type { MermaidConfig } from './config.type';
+import { MermaidConfig } from './config.type';
 import { log } from './logger';
 import utils from './utils';
 import { mermaidAPI } from './mermaidAPI';
 import { addDetector } from './diagram-api/detectType';
-import { isDetailedError, DetailedError } from './utils';
+import { isDetailedError } from './utils';

-export type { MermaidConfig, DetailedError };
 /**
 * ## init
 *
@@ -46,6 +45,16 @@ const init = async function (
  callback?: Function
 ) {
  try {
+    const conf = mermaidAPI.getConfig();
+    if (conf?.lazyLoadedDiagrams && conf.lazyLoadedDiagrams.length > 0) {
+      // Load all lazy loaded diagrams in parallel
+      await Promise.allSettled(
+        conf.lazyLoadedDiagrams.map(async (diagram: string) => {
+          const { id, detector, loadDiagram } = await import(diagram);
+          addDetector(id, detector, loadDiagram);
+        })
+      );
+    }
    await initThrowsErrors(config, nodes, callback);
  } catch (e) {
    log.warn('Syntax Error rendering');
@@ -58,18 +67,6 @@ const init = async function (
  }
 };

-/**
- * Equivalent to {@link init()}, except an error will be thrown on error.
- *
- * @param config - **Deprecated** Mermaid sequenceConfig.
- * @param nodes - One of:
- * - A DOM Node
- * - An array of DOM nodes (as would come from a jQuery selector)
- * - A W3C selector, a la `.mermaid` (default)
- * @param callback - Function that is called with the id of each generated mermaid diagram.
- *
- * @returns Resolves on success, otherwise the {@link Promise} will be rejected with an Error.
- */
 const initThrowsErrors = async function (
  config?: MermaidConfig,
  // eslint-disable-next-line no-undef
@@ -85,24 +82,6 @@ const initThrowsErrors = async function (
    mermaid.sequenceConfig = config;
  }

-  const errors = [];
-
-  if (conf?.lazyLoadedDiagrams && conf.lazyLoadedDiagrams.length > 0) {
-    // Load all lazy loaded diagrams in parallel
-    const results = await Promise.allSettled(
-      conf.lazyLoadedDiagrams.map(async (diagram: string) => {
-        const { id, detector, loadDiagram } = await import(diagram);
-        addDetector(id, detector, loadDiagram);
-      })
-    );
-    for (const result of results) {
-      if (result.status == 'rejected') {
-        log.warn(`Failed to lazyLoadedDiagram due to `, result.reason);
-        errors.push(result.reason);
-      }
-    }
-  }
-
  // if last argument is a function this is the callback function
  log.debug(`${!callback ? 'No ' : ''}Callback function found`);
  let nodesToProcess: ArrayLike<HTMLElement>;
@@ -128,6 +107,7 @@ const initThrowsErrors = async function (
  const idGenerator = new utils.initIdGenerator(conf.deterministicIds, conf.deterministicIDSeed);

  let txt: string;
+  const errors = [];

  // element is the current div with mermaid class
  for (const element of Array.from(nodesToProcess)) {
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -453,13 +453,12 @@ const handleDirective = function (p: any, directive: any, type: string): void {
 };

 /** @param {MermaidConfig} options */
-async function initialize(options: MermaidConfig = {}) {
+async function initialize(options: MermaidConfig) {
  // Handle legacy location of font-family configuration
-  if (options.fontFamily) {
-    if (!options.themeVariables) {
-      options.themeVariables = {};
+  if (options?.fontFamily) {
+    if (!options.themeVariables?.fontFamily) {
+      options.themeVariables = { fontFamily: options.fontFamily };
    }
-    options.themeVariables.fontFamily = options.fontFamily;
  }

  // Set default options
--- 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;
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -285,7 +285,6 @@ importers:
      cytoscape-cose-bilkent: ^4.1.0
      cytoscape-fcose: ^2.1.0
      d3: ^7.0.0
-      mermaid: workspace:*
      non-layered-tidy-tree-layout: ^2.0.2
      rimraf: ^3.0.2
    dependencies:
@@ -297,7 +296,6 @@ importers:
      non-layered-tidy-tree-layout: 2.0.2
    devDependencies:
      concurrently: 7.4.0
-      mermaid: link:../mermaid
      rimraf: 3.0.2

 packages:
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