Merge branch 'develop' into sidv/fixDetectDiagram

* develop: (50 commits)
  docs: Sync
  capitalization fix
  format Setup.md
  format cSpell.json
  format docs YAML
  format cSpell.json
  separate words & ignoreWords
  fix: "skin param"
  ignore the changelog
  Revert "fix: "skin param""
  fix: "skin param"
  fix: "corresponding"
  known terms
  known terms
  fix: "JetBrains"
  known terms
  known terms
  fix: "stable"
  known term
  add known term
  ...

packages/mermaid-example-diagram/src/detector.ts

@@ -1,3 +1,6 @@
+// @ts-ignore: TODO Fix ts errors
+export const id = 'example-diagram';
+
 /**
  * Detector function that will be called by mermaid to determine if the diagram is this type of digram.
  *
@@ -8,3 +11,8 @@
 export const detector = (txt: string) => {
   return txt.match(/^\s*example-diagram/) !== null;
 };
+
+export const loadDiagram = async () => {
+  const { diagram } = await import('./diagram-definition');
+  return { id, diagram };
+};

packages/mermaid-example-diagram/src/diagram-definition.ts

@@ -5,13 +5,10 @@ import renderer from './exampleDiagramRenderer';
 import styles from './styles';
 import { injectUtils } from './mermaidUtils';
 
-window.mermaid.connectDiagram(
-  'example-diagram',
-  {
-    db,
-    renderer,
-    parser,
-    styles,
-  },
-  injectUtils
-);
+export const diagram = {
+  db,
+  renderer,
+  parser,
+  styles,
+  injectUtils,
+};

packages/mermaid-example-diagram/src/registry.ts

@@ -1,33 +0,0 @@
-// @ts-ignore: TODO Fix ts errors
-import { detector } from './exampleDetector';
-
-const scriptElement = document.currentScript as HTMLScriptElement;
-const path = scriptElement.src;
-const lastSlash = path.lastIndexOf('/');
-const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);
-
-if (typeof document !== 'undefined') {
-  if (window.mermaid && typeof window.mermaid.detectors === 'object') {
-    window.mermaid.detectors.push({ id: 'example-diagram', detector });
-  } else {
-    window.mermaid = {};
-    window.mermaid.detectors = [{ id: 'example-diagram', detector }];
-  }
-
-  /*
-   * Wait for document loaded before starting the execution.
-   */
-  window.addEventListener(
-    'load',
-    () => {
-      if (window.mermaid && typeof window.mermaid.detectors === 'object') {
-        window.mermaid.detectors.push({
-          id: 'example-diagram',
-          detector,
-          path: baseFolder,
-        });
-      }
-    },
-    false
-  );
-}

packages/mermaid-mindmap/src/detector.ts

@@ -5,6 +5,6 @@ export const detector = (txt: string) => {
 };
 
 export const loadDiagram = async () => {
-  const { mindmap } = await import('./add-diagram');
-  return { id, diagram: mindmap };
+  const { diagram } = await import('./diagram-definition');
+  return { id, diagram };
 };

packages/mermaid-mindmap/src/diagram-definition.ts

@@ -5,7 +5,7 @@ import mindmapRenderer from './mindmapRenderer';
 import mindmapStyles from './styles';
 import { injectUtils } from './mermaidUtils';
 
-export const mindmap = {
+export const diagram = {
   db: mindmapDb,
   renderer: mindmapRenderer,
   parser: mindmapParser,

packages/mermaid-mindmap/src/mermaidUtils.ts

@@ -53,29 +53,3 @@ export const injectUtils = (
   sanitizeText = _sanitizeText;
   setupGraphViewbox = _setupGraphViewbox;
 };
-
-/*
-const warning = (..._args: any[]) => {
-  console.error('Log function was called before initialization');
-};
-
-export let log = {
-  trace: warning,
-  debug: warning,
-  info: warning,
-  warn: warning,
-  error: warning,
-  fatal: warning,
-};
-export let setLogLevel;
-export let getConfig;
-export let sanitizeText;
-export let setupGraphViewbox;
-export const injectUtils = (_log, _setLogLevel, _getConfig, _sanitizeText, _setupGraphViewbox) => {
-  log = _log;
-  setLogLevel = _setLogLevel;
-  getConfig = _getConfig;
-  sanitizeText = _sanitizeText;
-  setupGraphViewbox = _setupGraphViewbox;
-};
-*/

packages/mermaid/src/config.type.ts

@@ -3,7 +3,7 @@
 import DOMPurify from 'dompurify';
 
 export interface MermaidConfig {
-  extraDiagrams?: string[];
+  lazyLoadedDiagrams?: string[];
   theme?: string;
   themeVariables?: any;
   themeCSS?: string;

packages/mermaid/src/defaultConfig.ts

@@ -115,7 +115,7 @@ const config: Partial<MermaidConfig> = {
    * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
    */
   secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
-  extraDiagrams: [],
+  lazyLoadedDiagrams: [],
   /**
    * This option controls if the generated ids of nodes in the SVG are generated randomly or based
    * on a seed. If set to false, the IDs are generated based on the current date and thus are not

packages/mermaid/src/diagrams/class/svgDraw.js

@@ -347,9 +347,10 @@ const buildMethodDisplay = function (parsedText) {
 };
 
 const buildLegacyDisplay = function (text) {
-  // if for some reason we don't have any match, use old format to parse text
+  // if for some reason we dont have any match, use old format to parse text
   let displayText = '';
   let cssStyle = '';
+  let memberText = '';
   let returnType = '';
   let methodStart = text.indexOf('(');
   let methodEnd = text.indexOf(')');
@@ -370,21 +371,21 @@ const buildLegacyDisplay = function (text) {
     }
 
     const parameters = text.substring(methodStart + 1, methodEnd);
-    const classifier = text.substring(methodEnd + 1, methodEnd + 2);
-    cssStyle = parseClassifier(classifier);
+    const classifier = text.substring(methodEnd + 1, 1);
+    cssStyle = parseClassifier(text.substring(methodEnd + 1, methodEnd + 2));
 
     displayText = visibility + methodName + '(' + parseGenericTypes(parameters.trim()) + ')';
 
-    if (methodEnd <= text.length) {
+    if (methodEnd < text.length) {
       returnType = text.substring(methodEnd + 2).trim();
       if (returnType !== '') {
         returnType = ' : ' + parseGenericTypes(returnType);
         displayText += returnType;
       }
-    } else {
-      // finally - if all else fails, just send the text back as written (other than parsing for generic types)
-      displayText = parseGenericTypes(text);
     }
+  } else {
+    // finally - if all else fails, just send the text back as written (other than parsing for generic types)
+    displayText = parseGenericTypes(text);
   }
 
   return {
@@ -392,7 +393,6 @@ const buildLegacyDisplay = function (text) {
     cssStyle,
   };
 };
-
 /**
  * Adds a <tspan> for a member in a diagram
  *

packages/mermaid/src/diagrams/gantt/ganttDb.js

@@ -217,10 +217,12 @@ const getStartDate = function (prevTime, dateFormat, str) {
   } else {
     log.debug('Invalid date:' + str);
     log.debug('With date format:' + dateFormat.trim());
+    const d = new Date(str);
+    if (typeof d === 'undefined' || isNaN(d.getTime())) {
+      throw new Error('Invalid date:' + str);
+    }
+    return d;
   }
-
-  // Default date - now
-  return new Date();
 };
 
 /**

packages/mermaid/src/docs/README.md

@@ -263,7 +263,7 @@ Update version number in `package.json`.
 npm publish
 ```
 
-The above command generates files into the `dist` folder and publishes them to npmjs.org.
+The above command generates files into the `dist` folder and publishes them to <npmjs.org>.
 
 ## Related projects
 
@@ -279,7 +279,7 @@ Detailed information about how to contribute can be found in the [contribution g
 
 ## Security and safe diagrams
 
-For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
+For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitize the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
 
 As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from being executed. This is a great step forward for better security.
 

packages/mermaid/src/docs/Setup.md

@@ -72,15 +72,15 @@ Theme , the CSS style sheet
 
 | Parameter     | Description                       | Type   | Required | Values                                     |
 | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
-| securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
+| securityLevel | Level of trust for parsed diagram | string | Required | `sandbox`, `strict`, `loose`, `antiscript` |
 
 **Notes**:
 
-- **strict**: (**default**) tags in text are encoded, click functionality is disabled
-- **loose**: tags in text are allowed, click functionality is enabled
-- **antiscript**: html tags in text are allowed, (only script element is removed), click
+- **`strict`**: (**default**) tags in text are encoded, click functionality is disabled
+- **`loose`**: tags in text are allowed, click functionality is enabled
+- **`antiscript`**: html tags in text are allowed, (only script element is removed), click
   functionality is enabled
-- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This
+- **`sandbox`**: With this security level all rendering takes place in a sandboxed iframe. This
   prevent any JavaScript from running in the context. This may hinder interactive functionality
   of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
 
@@ -119,11 +119,11 @@ Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
 
 This option controls if the generated ids of nodes in the SVG are generated randomly or based
 on a seed. If set to false, the IDs are generated based on the current date and thus are not
-deterministic. This is the default behaviour.
+deterministic. This is the default behavior.
 
 **Notes**:
 
-This matters if your files are checked into sourcecontrol e.g. git and should not change unless
+This matters if your files are checked into source control e.g. git and should not change unless
 content is changed.
 
 Default value: false
@@ -210,16 +210,16 @@ Default value: true
 
 ### defaultRenderer
 
-| Parameter       | Description | Type    | Required | Values                  |
-| --------------- | ----------- | ------- | -------- | ----------------------- |
-| defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
+| Parameter       | Description | Type    | Required | Values                      |
+| --------------- | ----------- | ------- | -------- | --------------------------- |
+| defaultRenderer | See notes   | boolean | 4        | `dagre-d3`, `dagre-wrapper` |
 
 **Notes:**
 
 Decides which rendering engine that is to be used for the rendering. Legal values are:
-dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
+`dagre-d3` `dagre-wrapper` - wrapper for `dagre` implemented in mermaid
 
-Default value: 'dagre-wrapper'
+Default value: `dagre-wrapper`
 
 ## sequence
 
@@ -735,16 +735,16 @@ Default value: true
 
 ## defaultRenderer
 
-| Parameter       | Description | Type    | Required | Values                  |
-| --------------- | ----------- | ------- | -------- | ----------------------- |
-| defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
+| Parameter       | Description | Type    | Required | Values                      |
+| --------------- | ----------- | ------- | -------- | --------------------------- |
+| defaultRenderer | See notes   | boolean | 4        | `dagre-d3`, `dagre-wrapper` |
 
 **Notes**:
 
 Decides which rendering engine that is to be used for the rendering. Legal values are:
-dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
+`dagre-d3` `dagre-wrapper` - wrapper for `dagre` implemented in mermaid
 
-Default value: 'dagre-d3'
+Default value: `dagre-d3`
 
 ## useMaxWidth
 
@@ -761,16 +761,16 @@ Default value: true
 
 ## defaultRenderer
 
-| Parameter       | Description | Type    | Required | Values                  |
-| --------------- | ----------- | ------- | -------- | ----------------------- |
-| defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
+| Parameter       | Description | Type    | Required | Values                      |
+| --------------- | ----------- | ------- | -------- | --------------------------- |
+| defaultRenderer | See notes   | boolean | 4        | `dagre-d3`, `dagre-wrapper` |
 
 **Notes:**
 
 Decides which rendering engine that is to be used for the rendering. Legal values are:
-dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
+`dagre-d3` `dagre-wrapper` - wrapper for `dagre` implemented in mermaid
 
-Default value: 'dagre-d3'
+Default value: `dagre-d3`
 
 ## er
 
@@ -992,7 +992,7 @@ Default value: 4
 | --------------- | ----------- | ------- | -------- | ------------------ |
 | c4BoundaryInRow | See Notes   | Integer | Required | Any Positive Value |
 
-**Notes:** How many boundarys to place in each row.
+**Notes:** How many boundaries to place in each row.
 
 Default value: 2
 

packages/mermaid/src/docs/accessibility.md

@@ -17,7 +17,7 @@ The diagram authors can now add the accessibility options in the diagram definit
 - `accTitle: "Your Accessibility Title"` or
 - `accDescr: "Your Accessibility Description"`
 
-**When these two options are defined, they will add a coressponding `<title>` and `<desc>` tag in the SVG.**
+**When these two options are defined, they will add a corresponding `<title>` and `<desc>` tag in the SVG.**
 
 Let us take a look at the following example with a flowchart diagram:
 

packages/mermaid/src/docs/c4c.md

@@ -131,7 +131,7 @@ The following unfinished features are not supported in the short term.
 - - [x] Rel_Back
 - - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
 
-- [ ] Custom tags/stereotypes support and skinparam updates
+- [ ] Custom tags/stereotypes support and skin param updates
 - - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
 - - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
 - - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.

packages/mermaid/src/docs/integrations.md

@@ -31,7 +31,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
   - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
   - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
-- [Jetsbrain IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
+- [JetBrains IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
 - [mermerd](https://github.com/KarnerTh/mermerd)
 
 ## CRM/ERP/Similar

packages/mermaid/src/docs/mindmap.md

@@ -1,6 +1,6 @@
 # Mindmap
 
-> Mindmap: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stabel except for the icon integration which is the experimental part.
+> Mindmap: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.
 
 "A mind map is a diagram used to visually organize information into a hierarchy, showing relationships among pieces of the whole. It is often created around a single concept, drawn as an image in the center of a blank page, to which associated representations of ideas such as images, words and parts of words are added. Major ideas are connected directly to the central concept, and other ideas branch out from those major ideas." Wikipedia
 
@@ -31,7 +31,7 @@ mindmap
 
 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 dufferent 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 prevoius lines defining the nodes B and C.
+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

packages/mermaid/src/mermaid.ts

@@ -55,9 +55,10 @@ const init = async function (
   try {
     log.info('Detectors in init', mermaid.detectors); // eslint-disable-line
     const conf = mermaidAPI.getConfig();
-    if (conf?.extraDiagrams && conf.extraDiagrams.length > 0) {
+    if (conf?.lazyLoadedDiagrams && conf.lazyLoadedDiagrams.length > 0) {
+      // Load all lazy loaded diagrams in parallel
       await Promise.allSettled(
-        conf.extraDiagrams.map(async (diagram: string) => {
+        conf.lazyLoadedDiagrams.map(async (diagram: string) => {
           const { id, detector, loadDiagram } = await import(diagram);
           addDetector(id, detector, loadDiagram);
         })