Merge branch 'develop' into feature/1618_repeating_tasks

cypress/integration/rendering/erDiagram.spec.js

@@ -10,7 +10,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render an ER diagram with a recursive relationship', () => {
@@ -23,7 +22,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render an ER diagram with multiple relationships between the same two entities', () => {
@@ -35,7 +33,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render a cyclical ER diagram', () => {
@@ -48,7 +45,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render a not-so-simple ER diagram', () => {
@@ -66,7 +62,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render multiple ER diagrams', () => {
@@ -85,7 +80,6 @@ describe('Entity Relationship Diagram', () => {
       ],
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render an ER diagram with blank or empty labels', () => {
@@ -98,7 +92,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render an ER diagrams when useMaxWidth is true (default)', () => {
@@ -151,7 +144,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { er: { useMaxWidth: false } }
     );
-    cy.get('svg');
   });
 
   it('should render entities with and without attributes', () => {
@@ -164,7 +156,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render entities with generic and array attributes', () => {
@@ -179,7 +170,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render entities with length in attributes type', () => {
@@ -193,7 +183,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render entities and attributes with big and small entity names', () => {
@@ -209,7 +198,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render entities with keys', () => {
@@ -228,7 +216,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render entities with comments', () => {
@@ -247,7 +234,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render entities with keys and comments', () => {
@@ -267,7 +253,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render entities with aliases', () => {
@@ -285,7 +270,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('1433: should render a simple ER diagram with a title', () => {

cypress/integration/rendering/errorDiagram.spec.js

@@ -0,0 +1,45 @@
+import { imgSnapshotTest } from '../../helpers/util';
+
+describe('Error Diagrams', () => {
+  beforeEach(() => {
+    cy.on('uncaught:exception', (err) => {
+      expect(err.message).to.include('Parse error');
+      // return false to prevent the error from
+      // failing this test
+      return false;
+    });
+  });
+
+  it('should render a simple ER diagram', () => {
+    imgSnapshotTest(
+      `
+      error
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render error diagram for actual errors', () => {
+    imgSnapshotTest(
+      `
+    flowchart TD
+      A[Christmas] --|Get money| B(Go shopping)
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render error for wrong ER diagram', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+        ATLAS-ORGANIZATION ||--|{ ATLAS-PROJECTS : "has many"
+        ATLAS-PROJECTS ||--|{ MONGODB-CLUSTERS : "has many"
+        ATLAS-PROJECTS ||--|{ ATLAS-TEAMS : "has many"
+        MONGODB-CLUSTERS ||..|{
+        ATLAS-TEAMS ||..|{
+      `,
+      { logLevel: 1 }
+    );
+  });
+});

cypress/platform/viewer.js

@@ -47,7 +47,6 @@ const contentLoaded = async function () {
     await mermaid2.registerExternalDiagrams([externalExample]);
     mermaid2.initialize(graphObj.mermaid);
     await mermaid2.run();
-    markRendered();
   }
 };
 
@@ -123,7 +122,6 @@ const contentLoadedApi = async function () {
       bindFunctions(div);
     }
   }
-  markRendered();
 };
 
 if (typeof document !== 'undefined') {
@@ -135,10 +133,10 @@ if (typeof document !== 'undefined') {
     function () {
       if (this.location.href.match('xss.html')) {
         this.console.log('Using api');
-        void contentLoadedApi();
+        void contentLoadedApi().finally(markRendered);
       } else {
         this.console.log('Not using api');
-        void contentLoaded();
+        void contentLoaded().finally(markRendered);
       }
     },
     false

demos/error.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Error | Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+  </head>
+
+  <body>
+    <pre class="mermaid">
+      erDiagram
+        ATLAS-ORGANIZATION ||--|{ ATLAS-PROJECTS : "has many"
+        ATLAS-PROJECTS ||--|{ MONGODB-CLUSTERS : "has many"
+        ATLAS-PROJECTS ||--|{ ATLAS-TEAMS : "has many"
+    </pre>
+    <pre class="mermaid">
+      erDiagram
+        ATLAS-ORGANIZATION ||--|{ ATLAS-PROJECTS : "has many"
+        ATLAS-PROJECTS ||--|{ MONGODB-CLUSTERS : "has many"
+        ATLAS-PROJECTS ||--|{ ATLAS-TEAMS : "has many"
+        MONGODB-CLUSTERS ||..|{
+        ATLAS-TEAMS ||..|{
+    </pre>
+    <hr />
+    <pre class="mermaid">
+    flowchart TD
+      A[Christmas] -->|Get money| B(Go shopping)
+    </pre>
+    <pre class="mermaid">
+    flowchart TD
+      A[Christmas] --|Get money| B(Go shopping)
+    </pre>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+    </script>
+  </body>
+</html>

docs/config/setup/modules/mermaidAPI.md

@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:663](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L663)
+[mermaidAPI.ts:659](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L659)
 
 ## Functions
 

packages/mermaid/src/Diagram.ts

@@ -5,6 +5,7 @@ import { detectType, getDiagramLoader } from './diagram-api/detectType';
 import { extractFrontMatter } from './diagram-api/frontmatter';
 import { UnknownDiagramError } from './errors';
 import { DetailedError } from './utils';
+import { cleanupComments } from './diagram-api/comments';
 
 export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
 
@@ -43,7 +44,8 @@ export class Diagram {
     // Similarly, we can't do this in getDiagramFromText() because some code
     // calls diagram.db.clear(), which would reset anything set by
     // extractFrontMatter().
-    this.parser.parse = (text: string) => originalParse(extractFrontMatter(text, this.db));
+    this.parser.parse = (text: string) =>
+      originalParse(cleanupComments(extractFrontMatter(text, this.db)));
     this.parser.parser.yy = this.db;
     if (diagram.init) {
       diagram.init(cnf);

packages/mermaid/src/diagram-api/comments.spec.ts

@@ -0,0 +1,94 @@
+// tests to check that comments are removed
+
+import { cleanupComments } from './comments';
+import { describe, it, expect } from 'vitest';
+
+describe('comments', () => {
+  it('should remove comments', () => {
+    const text = `
+		
+%% This is a comment
+%% This is another comment
+graph TD
+	A-->B
+%% This is a comment
+`;
+    expect(cleanupComments(text)).toMatchInlineSnapshot(`
+      "graph TD
+      	A-->B
+      "
+    `);
+  });
+
+  it('should keep init statements when removing comments', () => {
+    const text = `
+%% This is a comment
+
+%% This is another comment
+%%{init: {'theme': 'forest'}}%%
+%%{ init: {'theme': 'space before init'}}%%
+%%{init: {'theme': 'space after ending'}}%% 
+graph TD
+	A-->B
+
+	B-->C
+%% This is a comment
+`;
+    expect(cleanupComments(text)).toMatchInlineSnapshot(`
+      "%%{init: {'theme': 'forest'}}%%
+      %%{ init: {'theme': 'space before init'}}%%
+      %%{init: {'theme': 'space after ending'}}%% 
+      graph TD
+      	A-->B
+
+      	B-->C
+      "
+    `);
+  });
+
+  it('should remove indented comments', () => {
+    const text = `
+%% This is a comment
+graph TD
+	A-->B
+	%% This is a comment
+	C-->D
+`;
+    expect(cleanupComments(text)).toMatchInlineSnapshot(`
+      "graph TD
+	A-->B
+	C-->D
+      "
+    `);
+  });
+
+  it('should remove empty newlines from start', () => {
+    const text = `
+
+
+
+
+%% This is a comment
+graph TD
+	A-->B
+`;
+    expect(cleanupComments(text)).toMatchInlineSnapshot(`
+      "graph TD
+      	A-->B
+      "
+    `);
+  });
+
+  it('should remove comments at end of text with no newline', () => {
+    const text = `
+graph TD
+	A-->B
+%% This is a comment`;
+
+    expect(cleanupComments(text)).toMatchInlineSnapshot(`
+      "graph TD
+	A-->B
+      "
+    `);
+  });
+});

packages/mermaid/src/diagram-api/comments.ts

@@ -0,0 +1,8 @@
+/**
+ * Remove all lines starting with `%%` from the text that don't contain a `%%{`
+ * @param text - The text to remove comments from
+ * @returns cleaned text
+ */
+export const cleanupComments = (text: string): string => {
+  return text.trimStart().replace(/^\s*%%(?!{)[^\n]+\n?/gm, '');
+};

packages/mermaid/src/diagram-api/diagram-orchestration.ts

@@ -13,7 +13,7 @@ import classDiagramV2 from '../diagrams/class/classDetector-V2';
 import state from '../diagrams/state/stateDetector';
 import stateV2 from '../diagrams/state/stateDetector-V2';
 import journey from '../diagrams/user-journey/journeyDetector';
-import error from '../diagrams/error/errorDetector';
+import errorDiagram from '../diagrams/error/errorDiagram';
 import flowchartElk from '../diagrams/flowchart/elk/detector';
 import timeline from '../diagrams/timeline/detector';
 import mindmap from '../diagrams/mindmap/detector';
@@ -28,6 +28,9 @@ export const addDiagrams = () => {
   // This is added here to avoid race-conditions.
   // We could optimize the loading logic somehow.
   hasLoadedDiagrams = true;
+  registerDiagram('error', errorDiagram, (text) => {
+    return text.toLowerCase().trim() === 'error';
+  });
   registerDiagram(
     '---',
     // --- diagram type may appear if YAML front-matter is not parsed correctly
@@ -57,7 +60,6 @@ export const addDiagrams = () => {
   );
   // Ordering of detectors is important. The first one to return true will be used.
   registerLazyLoadedDiagrams(
-    error,
     c4,
     classDiagramV2,
     classDiagram,

packages/mermaid/src/diagrams/er/parser/erDiagram.jison

@@ -19,8 +19,6 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
 <type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
 <arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
-\%%(?!\{)[^\n]*                                                 /* skip comments */
-[^\}]\%\%[^\n]*                                                 /* skip comments */
 [\n]+                           return 'NEWLINE';
 \s+                             /* skip whitespace */
 [\s]+                           return 'SPACE';
@@ -35,8 +33,6 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <block>[A-Za-z_][A-Za-z0-9\-_\[\]\(\)]*  return 'ATTRIBUTE_WORD'
 <block>\"[^"]*\"                return 'COMMENT';
 <block>[\n]+                    /* nothing */
-<block>\%%(?!\{)[^\n]*          /* skip comments in attribute block */
-<block>[^\}]\%\%[^\n]*          /* skip comments in attribute block */
 <block>"}"                      { this.popState(); return 'BLOCK_STOP'; }
 <block>.                        return yytext[0];
 

packages/mermaid/src/diagrams/error/errorDetector.ts

@@ -1,20 +0,0 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
-
-const id = 'error';
-
-const detector: DiagramDetector = (text) => {
-  return text.toLowerCase().trim() === 'error';
-};
-
-const loader = async () => {
-  const { diagram } = await import('./errorDiagram');
-  return { id, diagram };
-};
-
-const plugin: ExternalDiagramDefinition = {
-  id,
-  detector,
-  loader,
-};
-
-export default plugin;

packages/mermaid/src/diagrams/error/errorDiagram.ts

@@ -19,3 +19,5 @@ export const diagram: DiagramDefinition = {
     // no op
   },
 };
+
+export default diagram;

packages/mermaid/src/diagrams/error/errorRenderer.ts

@@ -4,15 +4,13 @@ import { select } from 'd3';
 import { log } from '../../logger';
 import { getErrorMessage } from '../../utils';
 
-let conf = {};
-
 /**
  * Merges the value of `conf` with the passed `cnf`
  *
  * @param cnf - Config to merge
  */
-export const setConf = function (cnf: any) {
+export const setConf = function () {
-  conf = { ...conf, ...cnf };
+  // no-op
 };
 
 /**
@@ -78,7 +76,7 @@ export const draw = (_text: string, id: string, mermaidVersion: string) => {
       .attr('y', 250)
       .attr('font-size', '150px')
       .style('text-anchor', 'middle')
-      .text('Syntax error in graph');
+      .text('Syntax error in text');
     g.append('text') // text label for the x axis
       .attr('class', 'error-text')
       .attr('x', 1250)

packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js

@@ -1,6 +1,7 @@
 import flowDb from '../flowDb';
 import flow from './flow';
 import { setConfig } from '../../../config';
+import { cleanupComments } from '../../../diagram-api/comments';
 
 setConfig({
   securityLevel: 'strict',
@@ -13,7 +14,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle comments', function () {
-    const res = flow.parser.parse('graph TD;\n%% Comment\n A-->B;');
+    const res = flow.parser.parse(cleanupComments('graph TD;\n%% Comment\n A-->B;'));
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -28,7 +29,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle comments at the start', function () {
-    const res = flow.parser.parse('%% Comment\ngraph TD;\n A-->B;');
+    const res = flow.parser.parse(cleanupComments('%% Comment\ngraph TD;\n A-->B;'));
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -43,7 +44,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle comments at the end', function () {
-    const res = flow.parser.parse('graph TD;\n A-->B\n %% Comment at the end\n');
+    const res = flow.parser.parse(cleanupComments('graph TD;\n A-->B\n %% Comment at the end\n'));
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -58,7 +59,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle comments at the end no trailing newline', function () {
-    const res = flow.parser.parse('graph TD;\n A-->B\n%% Comment');
+    const res = flow.parser.parse(cleanupComments('graph TD;\n A-->B\n%% Comment'));
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -73,7 +74,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle comments at the end many trailing newlines', function () {
-    const res = flow.parser.parse('graph TD;\n A-->B\n%% Comment\n\n\n');
+    const res = flow.parser.parse(cleanupComments('graph TD;\n A-->B\n%% Comment\n\n\n'));
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -88,7 +89,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle no trailing newlines', function () {
-    const res = flow.parser.parse('graph TD;\n A-->B');
+    const res = flow.parser.parse(cleanupComments('graph TD;\n A-->B'));
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -103,7 +104,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle many trailing newlines', function () {
-    const res = flow.parser.parse('graph TD;\n A-->B\n\n');
+    const res = flow.parser.parse(cleanupComments('graph TD;\n A-->B\n\n'));
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -118,7 +119,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle a comment with blank rows in-between', function () {
-    const res = flow.parser.parse('graph TD;\n\n\n %% Comment\n A-->B;');
+    const res = flow.parser.parse(cleanupComments('graph TD;\n\n\n %% Comment\n A-->B;'));
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -134,7 +135,9 @@ describe('[Comments] when parsing', () => {
 
   it('should handle a comment with mermaid flowchart code in them', function () {
     const res = flow.parser.parse(
-      'graph TD;\n\n\n %% Test od>Odd shape]-->|Two line<br>edge comment|ro;\n A-->B;'
+      cleanupComments(
+        'graph TD;\n\n\n %% Test od>Odd shape]-->|Two line<br>edge comment|ro;\n A-->B;'
+      )
     );
 
     const vert = flow.parser.yy.getVertices();

packages/mermaid/src/diagrams/flowchart/parser/flow.jison

@@ -27,8 +27,6 @@
 <type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
 <type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
 <arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
-\%\%(?!\{)[^\n]*                                                /* skip comments */
-[^\}]\%\%[^\n]*                                                 /* skip comments */
 accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
 <acc_title>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
 accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }

packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js

@@ -1,6 +1,7 @@
 import flowDb from '../flowDb';
 import flow from './flow';
 import { setConfig } from '../../../config';
+import { cleanupComments } from '../../../diagram-api/comments';
 
 setConfig({
   securityLevel: 'strict',
@@ -13,7 +14,7 @@ describe('parsing a flow chart', function () {
   });
 
   it('should handle a trailing whitespaces after statements', function () {
-    const res = flow.parser.parse('graph TD;\n\n\n %% Comment\n A-->B; \n B-->C;');
+    const res = flow.parser.parse(cleanupComments('graph TD;\n\n\n %% Comment\n A-->B; \n B-->C;'));
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();

packages/mermaid/src/mermaid.ts

@@ -392,7 +392,7 @@ const render = (id: string, text: string, container?: Element): Promise<RenderRe
   });
 };
 
-const mermaid: {
+export interface Mermaid {
   startOnLoad: boolean;
   parseError?: ParseErrorFunction;
   mermaidAPI: typeof mermaidAPI;
@@ -405,7 +405,9 @@ const mermaid: {
   contentLoaded: typeof contentLoaded;
   setParseErrorHandler: typeof setParseErrorHandler;
   detectType: typeof detectType;
-} = {
+}
+
+const mermaid: Mermaid = {
   startOnLoad: true,
   mermaidAPI,
   parse,

packages/mermaid/src/mermaidAPI.ts

@@ -399,9 +399,6 @@ const render = async function (
   // clean up text CRLFs
   text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
 
-  // eslint-disable-next-line unicorn/better-regex
-  text = text.replace(/\s*%%[^{\ninit].*\n/gm, '\n'); // remove comments from text to avoid issues with parser
-
   const idSelector = '#' + id;
   const iFrameID = 'i' + id;
   const iFrameID_selector = '#' + iFrameID;
@@ -534,6 +531,10 @@ const render = async function (
 
   attachFunctions();
 
+  if (parseEncounteredException) {
+    throw parseEncounteredException;
+  }
+
   // -------------------------------------------------------------------------------
   // Remove the temporary HTML element if appropriate
   const tmpElementSelector = isSandboxed ? iFrameID_selector : enclosingDivID_selector;
@@ -542,10 +543,6 @@ const render = async function (
     node.remove();
   }
 
-  if (parseEncounteredException) {
-    throw parseEncounteredException;
-  }
-
   return {
     svg: svgCode,
     bindFunctions: diag.db.bindFunctions,