diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js
index df1fac0cd..faa511626 100644
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/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', () => {
diff --git a/cypress/integration/rendering/errorDiagram.spec.js b/cypress/integration/rendering/errorDiagram.spec.js
new file mode 100644
index 000000000..e837565d3
--- /dev/null
+++ b/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 }
+    );
+  });
+});
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index c0156eee3..cb65f73b0 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -133,6 +133,24 @@ describe('Gantt diagram', () => {
     );
   });
 
+  it('should default to showing today marker', () => {
+    // This test only works if the environment thinks today is 1010-10-10
+    imgSnapshotTest(
+      `
+      gantt
+        title Show today marker (vertical line should be visible)
+        dateFormat YYYY-MM-DD
+        axisFormat %d
+        %% Should default to being on
+        %% todayMarker on
+        section Section1
+         Yesterday: 1010-10-09, 1d
+         Today: 1010-10-10, 1d
+      `,
+      {}
+    );
+  });
+
   it('should hide today marker', () => {
     imgSnapshotTest(
       `
@@ -142,7 +160,8 @@ describe('Gantt diagram', () => {
         axisFormat %d
         todayMarker off
         section Section1
-         Today: 1, -1h
+         Yesterday: 1010-10-09, 1d
+         Today: 1010-10-10, 1d
       `,
       {}
     );
@@ -157,7 +176,8 @@ describe('Gantt diagram', () => {
       axisFormat %d
       todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
       section Section1
-       Today: 1, -1h
+       Yesterday: 1010-10-09, 1d
+       Today: 1010-10-10, 1d
       `,
       {}
     );
@@ -435,4 +455,39 @@ describe('Gantt diagram', () => {
       { gantt: { topAxis: true } }
     );
   });
+
+  it('should render when compact is true', () => {
+    imgSnapshotTest(
+      `
+      ---
+      displayMode: compact
+      ---
+      gantt
+        title GANTT compact
+        dateFormat  HH:mm:ss
+        axisFormat  %Hh%M
+
+        section DB Clean
+        Clean: 12:00:00, 10m
+        Clean: 12:30:00, 12m
+        Clean: 13:00:00, 8m
+        Clean: 13:30:00, 9m
+        Clean: 14:00:00, 13m
+        Clean: 14:30:00, 10m
+        Clean: 15:00:00, 11m
+
+        section Sessions
+        A: 12:00:00, 63m
+        B: 12:30:00, 12m
+        C: 13:05:00, 12m
+        D: 13:06:00, 33m
+        E: 13:15:00, 55m
+        F: 13:20:00, 12m
+        G: 13:32:00, 18m
+        H: 13:50:00, 20m
+        I: 14:10:00, 10m
+    `,
+      {}
+    );
+  });
 });
diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
index 2e1093519..99533192d 100644
--- a/cypress/platform/viewer.js
+++ b/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
diff --git a/demos/error.html b/demos/error.html
new file mode 100644
index 000000000..2d6d1b01f
--- /dev/null
+++ b/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>
diff --git a/demos/gantt.html b/demos/gantt.html
index 613dc8694..88f52ef5c 100644
--- a/demos/gantt.html
+++ b/demos/gantt.html
@@ -78,7 +78,7 @@
     axisFormat %d/%m
     todayMarker off
     section Section1
-    Today: 1, -01:00, 5min
+    Today: 1, 08-08-09-01:00, 5min
     </pre>
     <hr />
 
@@ -89,7 +89,7 @@
     axisFormat %d/%m
     todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
     section Section1
-    Today: 1, -01:00, 5min
+    Today: 1, 08-08-09-01:00, 5min
     </pre>
     <hr />
 
@@ -166,6 +166,37 @@
     </pre>
     <hr />
 
+    <pre class="mermaid">
+    ---
+      displayMode: compact
+    ---
+    gantt
+    title GANTT compact
+    dateFormat  HH:mm:ss
+    axisFormat  %Hh%M
+
+    section DB Clean
+    Clean: 12:00:00, 10m
+    Clean: 12:30:00, 12m
+    Clean: 13:00:00, 8m
+    Clean: 13:30:00, 9m
+    Clean: 14:00:00, 13m
+    Clean: 14:30:00, 10m
+    Clean: 15:00:00, 11m
+
+    section Sessions
+    A: 12:00:00, 63m
+    B: 12:30:00, 12m
+    C: 13:05:00, 12m
+    D: 13:06:00, 33m
+    E: 13:15:00, 55m
+    F: 13:20:00, 12m
+    G: 13:32:00, 18m
+    H: 13:50:00, 20m
+    I: 14:10:00, 10m
+    </pre>
+    <hr />
+
     <script>
       function ganttTestClick(a, b, c) {
         console.log('a:', a);
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index e2f036785..91ee30e2b 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -88,6 +88,7 @@ const config = {
     numberSectionStyles: 4,
     axisFormat: '%Y-%m-%d',
     topAxis: false,
+    displayMode: '',
   },
 };
 mermaid.initialize(config);
diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md
index 6a7af3331..1b12063d7 100644
--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -257,9 +257,41 @@ The pattern is:
 
 More info in: <https://github.com/d3/d3-time#interval_every>
 
+## Output in compact mode
+
+The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.
+
+```mermaid-example
+---
+displayMode: compact
+---
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :a2, 2014-01-20, 25d
+    Another one      :a3, 2014-02-10, 20d
+```
+
+```mermaid
+---
+displayMode: compact
+---
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :a2, 2014-01-20, 25d
+    Another one      :a3, 2014-02-10, 20d
+```
+
 ## Comments
 
-Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
+Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax.
 
 ```mermaid-example
 gantt
diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 8e924f2fa..adb596734 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/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,15 +44,9 @@ 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) => {
-    //   console.log('parse called');
-    //   try {
-    //     originalParse(extractFrontMatter(text, this.db));
-    //   } catch (e) {
-    //     console.log('parse called', e);
-    //   }
-    // };
+
+    this.parser.parse = (text: string) =>
+      originalParse(cleanupComments(extractFrontMatter(text, this.db)));
 
     this.parser.parser.yy = this.db;
     if (diagram.init) {
diff --git a/packages/mermaid/src/commonDb.ts b/packages/mermaid/src/commonDb.ts
index 42ffde004..a9ad0f54b 100644
--- a/packages/mermaid/src/commonDb.ts
+++ b/packages/mermaid/src/commonDb.ts
@@ -3,6 +3,7 @@ import { getConfig } from './config';
 let title = '';
 let diagramTitle = '';
 let description = '';
+
 const sanitizeText = (txt: string): string => _sanitizeText(txt, getConfig());
 
 export const clear = function (): void {
@@ -36,10 +37,10 @@ export const getDiagramTitle = function (): string {
 };
 
 export default {
-  setAccTitle,
   getAccTitle,
+  setAccTitle,
+  getDiagramTitle,
   setDiagramTitle,
-  getDiagramTitle: getDiagramTitle,
   getAccDescription,
   setAccDescription,
   clear,
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index c3ab7671e..545fdbbfb 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -335,6 +335,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
   axisFormat?: string;
   tickInterval?: string;
   topAxis?: boolean;
+  displayMode?: string;
 }
 
 export interface SequenceDiagramConfig extends BaseDiagramConfig {
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 4d8ebf4e8..2ca995251 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -671,6 +671,17 @@ const config: Partial<MermaidConfig> = {
      */
     numberSectionStyles: 4,
 
+    /**
+     * | Parameter   | Description               | Type   | Required | Values    |
+     * | ----------- | ------------------------- | ------ | -------- | --------- |
+     * | displayMode | Controls the display mode | string | 4        | 'compact' |
+     *
+     * **Notes**:
+     *
+     * - **compact**: Enables displaying multiple tasks on the same row.
+     */
+    displayMode: '',
+
     /**
      * | Parameter  | Description                  | Type | Required | Values           |
      * | ---------- | ---------------------------- | ---- | -------- | ---------------- |
@@ -696,7 +707,6 @@ const config: Partial<MermaidConfig> = {
      * Default value: undefined
      */
     tickInterval: undefined,
-
     /**
      * | Parameter   | Description | Type    | Required | Values      |
      * | ----------- | ----------- | ------- | -------- | ----------- |
diff --git a/packages/mermaid/src/diagram-api/comments.spec.ts b/packages/mermaid/src/diagram-api/comments.spec.ts
new file mode 100644
index 000000000..a2c896079
--- /dev/null
+++ b/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
+      "
+    `);
+  });
+});
diff --git a/packages/mermaid/src/diagram-api/comments.ts b/packages/mermaid/src/diagram-api/comments.ts
new file mode 100644
index 000000000..be39b0a0f
--- /dev/null
+++ 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, '');
+};
diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 73bfcf084..a88a34f19 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/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,
diff --git a/packages/mermaid/src/diagram-api/frontmatter.ts b/packages/mermaid/src/diagram-api/frontmatter.ts
index d6811388c..a9c4995e6 100644
--- a/packages/mermaid/src/diagram-api/frontmatter.ts
+++ b/packages/mermaid/src/diagram-api/frontmatter.ts
@@ -11,6 +11,8 @@ export const frontMatterRegex = /^-{3}\s*[\n\r](.*?)[\n\r]-{3}\s*[\n\r]+/s;
 
 type FrontMatterMetadata = {
   title?: string;
+  // Allows custom display modes. Currently used for compact mode in gantt charts.
+  displayMode?: string;
 };
 
 /**
@@ -33,6 +35,10 @@ export function extractFrontMatter(text: string, db: DiagramDb): string {
       db.setDiagramTitle?.(parsed.title);
     }
 
+    if (parsed?.displayMode) {
+      db.setDisplayMode?.(parsed.displayMode);
+    }
+
     return text.slice(matches[0].length);
   } else {
     return text;
diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 081136563..8c5d14eb8 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -16,6 +16,7 @@ export interface InjectUtils {
 export interface DiagramDb {
   clear?: () => void;
   setDiagramTitle?: (title: string) => void;
+  setDisplayMode?: (title: string) => void;
   getAccTitle?: () => string;
   getAccDescription?: () => string;
   bindFunctions?: (element: Element) => void;
diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison b/packages/mermaid/src/diagrams/er/parser/erDiagram.jison
index d9f03c387..8ffa87c63 100644
--- a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison
+++ b/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];
 
diff --git a/packages/mermaid/src/diagrams/error/errorDetector.ts b/packages/mermaid/src/diagrams/error/errorDetector.ts
deleted file mode 100644
index 2bdcd7028..000000000
--- a/packages/mermaid/src/diagrams/error/errorDetector.ts
+++ /dev/null
@@ -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;
diff --git a/packages/mermaid/src/diagrams/error/errorDiagram.ts b/packages/mermaid/src/diagrams/error/errorDiagram.ts
index d081e1028..7b9f18c3b 100644
--- a/packages/mermaid/src/diagrams/error/errorDiagram.ts
+++ b/packages/mermaid/src/diagrams/error/errorDiagram.ts
@@ -19,3 +19,5 @@ export const diagram: DiagramDefinition = {
     // no op
   },
 };
+
+export default diagram;
diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts
index 60877cb8d..046bcfdcf 100644
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/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) {
-  conf = { ...conf, ...cnf };
+export const setConf = function () {
+  // 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)
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js
index 7aeed304c..cb1e4a923 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js
+++ b/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();
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 19ab80b05..51427118f 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -28,8 +28,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'; }
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js
index 6b440da79..692e72f37 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js
+++ b/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();
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js
index 475ee4de4..fa872027d 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js
@@ -32,6 +32,7 @@ let links = {};
 let sections = [];
 let tasks = [];
 let currentSection = '';
+let displayMode = '';
 const tags = ['active', 'done', 'crit', 'milestone'];
 let funs = [];
 let inclusiveEndDates = false;
@@ -55,6 +56,7 @@ export const clear = function () {
   rawTasks = [];
   dateFormat = '';
   axisFormat = '';
+  displayMode = '';
   tickInterval = undefined;
   todayMarker = '';
   includes = [];
@@ -110,6 +112,14 @@ export const topAxisEnabled = function () {
   return topAxis;
 };
 
+export const setDisplayMode = function (txt) {
+  displayMode = txt;
+};
+
+export const getDisplayMode = function () {
+  return displayMode;
+};
+
 export const getDateFormat = function () {
   return dateFormat;
 };
@@ -143,11 +153,11 @@ export const getSections = function () {
 };
 
 export const getTasks = function () {
-  let allItemsPricessed = compileTasks();
+  let allItemsProcessed = compileTasks();
   const maxDepth = 10;
   let iterationCount = 0;
-  while (!allItemsPricessed && iterationCount < maxDepth) {
-    allItemsPricessed = compileTasks();
+  while (!allItemsProcessed && iterationCount < maxDepth) {
+    allItemsProcessed = compileTasks();
     iterationCount++;
   }
 
@@ -719,6 +729,8 @@ export default {
   getAccTitle,
   setDiagramTitle,
   getDiagramTitle,
+  setDisplayMode,
+  getDisplayMode,
   setAccDescription,
   getAccDescription,
   addSection,
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts b/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
index d65f2fdfd..812cfd9b8 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
@@ -34,6 +34,7 @@ describe('when using the ganttDb', function () {
     beforeEach(function () {
       ganttDb.setDateFormat('YYYY-MM-DD');
       ganttDb.enableInclusiveEndDates();
+      ganttDb.setDisplayMode('compact');
       ganttDb.setTodayMarker('off');
       ganttDb.setExcludes('weekends 2019-02-06,friday');
       ganttDb.addSection('weekends skip test');
@@ -53,6 +54,7 @@ describe('when using the ganttDb', function () {
       ${'getExcludes'}          | ${[]}
       ${'getSections'}          | ${[]}
       ${'endDatesAreInclusive'} | ${false}
+      ${'getDisplayMode'}       | ${''}
     `)('should clear $fn', ({ fn, expected }) => {
       expect(ganttDb[fn]()).toEqual(expected);
     });
diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 7a012beb5..78bf2fcea 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -24,12 +24,43 @@ export const setConf = function () {
   log.debug('Something is calling, setConf, remove the call');
 };
 
+/**
+ * For this issue:
+ * https://github.com/mermaid-js/mermaid/issues/1618
+ *
+ * Finds the number of intersections between tasks that happen at any point in time.
+ * Used to figure out how many rows are needed to display the tasks when the display
+ * mode is set to 'compact'.
+ *
+ * @param tasks
+ * @param orderOffset
+ */
+const getMaxIntersections = (tasks, orderOffset) => {
+  let timeline = [...tasks].map(() => -Infinity);
+  let sorted = [...tasks].sort((a, b) => a.startTime - b.startTime || a.order - b.order);
+  let maxIntersections = 0;
+  for (const element of sorted) {
+    for (let j = 0; j < timeline.length; j++) {
+      if (element.startTime >= timeline[j]) {
+        timeline[j] = element.endTime;
+        element.order = j + orderOffset;
+        if (j > maxIntersections) {
+          maxIntersections = j;
+        }
+        break;
+      }
+    }
+  }
+
+  return maxIntersections;
+};
+
 let w;
 export const draw = function (text, id, version, diagObj) {
   const conf = getConfig().gantt;
+
   // diagObj.db.clear();
   // parser.parse(text);
-
   const securityLevel = getConfig().securityLevel;
   // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
@@ -56,7 +87,40 @@ export const draw = function (text, id, version, diagObj) {
   const taskArray = diagObj.db.getTasks();
 
   // Set height based on number of tasks
-  const h = taskArray.length * (conf.barHeight + conf.barGap) + 2 * conf.topPadding;
+
+  let categories = [];
+
+  for (const element of taskArray) {
+    categories.push(element.type);
+  }
+
+  categories = checkUnique(categories);
+  const categoryHeights = {};
+
+  let h = 2 * conf.topPadding;
+  if (diagObj.db.getDisplayMode() === 'compact' || conf.displayMode === 'compact') {
+    const categoryElements = {};
+    for (const element of taskArray) {
+      if (categoryElements[element.section] === undefined) {
+        categoryElements[element.section] = [element];
+      } else {
+        categoryElements[element.section].push(element);
+      }
+    }
+
+    let intersections = 0;
+    for (const category of Object.keys(categoryElements)) {
+      const categoryHeight = getMaxIntersections(categoryElements[category], intersections) + 1;
+      intersections += categoryHeight;
+      h += categoryHeight * (conf.barHeight + conf.barGap);
+      categoryHeights[category] = categoryHeight;
+    }
+  } else {
+    h += taskArray.length * (conf.barHeight + conf.barGap);
+    for (const category of categories) {
+      categoryHeights[category] = taskArray.filter((task) => task.type === category).length;
+    }
+  }
 
   // Set viewBox
   elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
@@ -74,16 +138,6 @@ export const draw = function (text, id, version, diagObj) {
     ])
     .rangeRound([0, w - conf.leftPadding - conf.rightPadding]);
 
-  let categories = [];
-
-  for (const element of taskArray) {
-    categories.push(element.type);
-  }
-
-  const catsUnfiltered = categories; // for vert labels
-
-  categories = checkUnique(categories);
-
   /**
    * @param a
    * @param b
@@ -157,11 +211,15 @@ export const draw = function (text, id, version, diagObj) {
    * @param w
    */
   function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w) {
+    // Get unique task orders. Required to draw the background rects when display mode is compact.
+    const uniqueTaskOrderIds = [...new Set(theArray.map((item) => item.order))];
+    const uniqueTasks = uniqueTaskOrderIds.map((id) => theArray.find((item) => item.order === id));
+
     // Draw background rects covering the entire width of the graph, these form the section rows.
     svg
       .append('g')
       .selectAll('rect')
-      .data(theArray)
+      .data(uniqueTasks)
       .enter()
       .append('rect')
       .attr('x', 0)
@@ -582,12 +640,9 @@ export const draw = function (text, id, version, diagObj) {
    * @param theTopPad
    */
   function vertLabels(theGap, theTopPad) {
-    const numOccurances = [];
     let prevGap = 0;
 
-    for (const [i, category] of categories.entries()) {
-      numOccurances[i] = [category, getCount(category, catsUnfiltered)];
-    }
+    const numOccurances = Object.keys(categoryHeights).map((d) => [d, categoryHeights[d]]);
 
     svg
       .append('g') // without doing this, impossible to put grid lines behind text
@@ -625,7 +680,6 @@ export const draw = function (text, id, version, diagObj) {
         }
       })
       .attr('font-size', conf.sectionFontSize)
-      .attr('font-size', conf.sectionFontSize)
       .attr('class', function (d) {
         for (const [i, category] of categories.entries()) {
           if (d[0] === category) {
@@ -682,31 +736,6 @@ export const draw = function (text, id, version, diagObj) {
     }
     return result;
   }
-
-  /**
-   * From this stack exchange question:
-   * http://stackoverflow.com/questions/14227981/count-how-many-strings-in-an-array-have-duplicates-in-the-same-array
-   *
-   * @param arr
-   */
-  function getCounts(arr) {
-    let i = arr.length; // const to loop over
-    const obj = {}; // obj to store results
-    while (i) {
-      obj[arr[--i]] = (obj[arr[i]] || 0) + 1; // count occurrences
-    }
-    return obj;
-  }
-
-  /**
-   * Get specific from everything
-   *
-   * @param word
-   * @param arr
-   */
-  function getCount(word, arr) {
-    return getCounts(arr)[word] || 0;
-  }
 };
 
 export default {
diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
index 2223aa378..0eb45ec41 100644
--- a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
+++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
@@ -131,9 +131,10 @@ statement
   | includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);}
   | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);}
   | title {yy.setDiagramTitle($1.substr(6));$$=$1.substr(6);}
-  | acc_title acc_title_value  { $$=$2.trim();yy.setAccTitle($$); }
-  | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
-  | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }  | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
+  | acc_title acc_title_value { $$=$2.trim();yy.setAccTitle($$); }
+  | acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); }
+  | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
+  | section { yy.addSection($1.substr(8));$$=$1.substr(8); }
   | clickStatement
   | taskTxt taskData {yy.addTask($1,$2);$$='task';}
   | directive
diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md
index 7c446d91f..eaa07c707 100644
--- a/packages/mermaid/src/docs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -189,9 +189,27 @@ The pattern is:
 
 More info in: [https://github.com/d3/d3-time#interval_every](https://github.com/d3/d3-time#interval_every)
 
+## Output in compact mode
+
+The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.
+
+```mmd
+---
+displayMode: compact
+---
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :a2, 2014-01-20, 25d
+    Another one      :a3, 2014-02-10, 20d
+```
+
 ## Comments
 
-Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
+Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax.
 
 ```mmd
 gantt
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index bd99877b6..4b02adb1c 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/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,
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 039e8c596..b015994ac 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -406,9 +406,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;
@@ -541,6 +538,10 @@ const render = async function (
 
   attachFunctions();
 
+  if (parseEncounteredException) {
+    throw parseEncounteredException;
+  }
+
   // -------------------------------------------------------------------------------
   // Remove the temporary HTML element if appropriate
   const tmpElementSelector = isSandboxed ? iFrameID_selector : enclosingDivID_selector;
@@ -549,10 +550,6 @@ const render = async function (
     node.remove();
   }
 
-  if (parseEncounteredException) {
-    throw parseEncounteredException;
-  }
-
   return {
     svg: svgCode,
     bindFunctions: diag.db.bindFunctions,
@@ -660,6 +657,7 @@ function addA11yInfo(
  *       numberSectionStyles: 4,
  *       axisFormat: '%Y-%m-%d',
  *       topAxis: false,
+ *       displayMode: '',
  *     },
  *   };
  *   mermaid.initialize(config);