diff --git a/cypress/platform/sidv.html b/cypress/platform/sidv.html
index 9abeb6e0c..b0a1699da 100644
--- a/cypress/platform/sidv.html
+++ b/cypress/platform/sidv.html
@@ -1,246 +1,17 @@
 <html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background:#333; */
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-      h1 {
-        color: grey;
-      }
-      .mermaid2 {
-        display: none;
-      }
-      .mermaid svg {
-        /* font-size: 18px !important; */
-        background-color: #eee;
-        background-image: radial-gradient(#fff 1%, transparent 11%),
-          radial-gradient(#fff 1%, transparent 11%);
-        background-size: 20px 20px;
-        background-position: 0 0, 10px 10px;
-        background-repeat: repeat;
-      }
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-    </style>
-  </head>
   <body>
     <pre id="diagram" class="mermaid">
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 graph TB
       a --> b
       a --> c
       b --> d
       c --> d
     </pre>
-    <pre id="diagram" class="mermaid">
-flowchart-elk LR
-  subgraph A
-  a --> b
-  end
-  subgraph B
-  b
-  end
-    </pre>
-    <pre id="diagram" class="mermaid">
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-flowchart TB
-  %% I could not figure out how to use double quotes in labels in Mermaid
-  subgraph ibm[IBM Espresso CPU]
-    core0[IBM PowerPC Broadway Core 0]
-    core1[IBM PowerPC Broadway Core 1]
-    core2[IBM PowerPC Broadway Core 2]
 
-    rom[16 KB ROM]
-
-    core0 --- core2
-
-    rom --> core2
-  end
-
-  subgraph amd[AMD Latte GPU]
-    mem[Memory & I/O Bridge]
-    dram[DRAM Controller]
-    edram[32 MB EDRAM MEM1]
-    rom[512 B SEEPROM]
-
-    sata[SATA IF]
-    exi[EXI]
-
-    subgraph gx[GX]
-      sram[3 MB 1T-SRAM]
-    end
-
-    radeon[AMD Radeon R7xx GX2]
-
-    mem --- gx
-    mem --- radeon
-
-    rom --- mem
-
-    mem --- sata
-    mem --- exi
-
-    dram --- sata
-    dram --- exi
-  end
-
-  ddr3[2 GB DDR3 RAM MEM2]
-
-  mem --- ddr3
-  dram --- ddr3
-  edram --- ddr3
-
-  core1 --- mem
-
-  exi --- rtc
-  rtc{{rtc}}
-</pre
-    >
-    <br />
-    <pre id="diagram" class="mermaid">
-flowchart TB
-  %% I could not figure out how to use double quotes in labels in Mermaid
-  subgraph ibm[IBM Espresso CPU]
-    core0[IBM PowerPC Broadway Core 0]
-    core1[IBM PowerPC Broadway Core 1]
-    core2[IBM PowerPC Broadway Core 2]
-
-    rom[16 KB ROM]
-
-    core0 --- core2
-
-    rom --> core2
-  end
-
-  subgraph amd[AMD Latte GPU]
-    mem[Memory & I/O Bridge]
-    dram[DRAM Controller]
-    edram[32 MB EDRAM MEM1]
-    rom[512 B SEEPROM]
-
-    sata[SATA IF]
-    exi[EXI]
-
-    subgraph gx[GX]
-      sram[3 MB 1T-SRAM]
-    end
-
-    radeon[AMD Radeon R7xx GX2]
-
-    mem --- gx
-    mem --- radeon
-
-    rom --- mem
-
-    mem --- sata
-    mem --- exi
-
-    dram --- sata
-    dram --- exi
-  end
-
-  ddr3[2 GB DDR3 RAM MEM2]
-
-  mem --- ddr3
-  dram --- ddr3
-  edram --- ddr3
-
-  core1 --- mem
-
-  exi --- rtc
-  rtc{{rtc}}
-</pre
-    >
-    <br />
-    &nbsp;
-    <pre id="diagram" class="mermaid2">
-      flowchart LR
-  B1 --be be--x B2
-  B1 --bo bo--o B3
-  subgraph Ugge
-      B2
-      B3
-      subgraph inner
-          B4
-          B5
-      end
-      subgraph inner2
-        subgraph deeper
-          C4
-          C5
-        end
-        C6
-      end
-
-      B4 --> C4
-
-      B3 -- X --> B4
-      B2 --> inner
-
-      C4 --> C5
-  end
-
-  subgraph outer
-      B6
-  end
-  B6 --> B5
-  </pre
-    >
-    <pre id="diagram" class="mermaid2">
-sequenceDiagram
-    Customer->>+Stripe: Makes a payment request
-    Stripe->>+Bank: Forwards the payment request to the bank
-    Bank->>+Customer: Asks for authorization
-    Customer->>+Bank: Provides authorization
-    Bank->>+Stripe: Sends a response with payment details
-    Stripe->>+Merchant: Sends a notification of payment receipt
-    Merchant->>+Stripe: Confirms the payment
-    Stripe->>+Customer: Sends a confirmation of payment
-    Customer->>+Merchant: Receives goods or services
-        </pre
-    >
-    <pre id="diagram" class="mermaid2">
-      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="d2"></div>
 
     <script type="module">
-      import mermaid from '../../packages/mermaid/src/mermaid';
+      import mermaid from '/mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -265,6 +36,11 @@ sequenceDiagram
         console.error('In parse error:');
         console.error(err);
       };
+      const value = `graph TD\nHello --> World`;
+      const el = document.getElementById('d2');
+      const { svg } = await mermaid.render('d22', value);
+      console.log(svg);
+      el.innerHTML = svg;
       // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
       // mermaid.test1('second_fast', 200).then((r) => console.info(r));
       // mermaid.test1('third_fast', 200).then((r) => console.info(r));
diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts
index 6ffe5df85..70714cdb5 100644
--- a/packages/mermaid/src/diagram-api/detectType.ts
+++ b/packages/mermaid/src/diagram-api/detectType.ts
@@ -97,4 +97,6 @@ export const addDetector = (key: string, detector: DiagramDetector, loader?: Dia
   log.debug(`Detector with key ${key} added${loader ? ' with loader' : ''}`);
 };
 
-export const getDiagramLoader = (key: string) => detectors[key].loader;
+export const getDiagramLoader = (key: string) => {
+  return detectors[key].loader;
+};
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
index 9e04c861f..b5a8027ab 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
@@ -15,13 +15,17 @@ describe('DiagramAPI', () => {
   });
 
   it('should throw error if diagram is not defined', () => {
-    expect(() => getDiagram('loki')).toThrow();
+    expect(() => getDiagram('loki')).toThrowErrorMatchingInlineSnapshot(
+      '"Diagram loki not found."'
+    );
   });
 
   it('should handle diagram registrations', () => {
-    expect(() => getDiagram('loki')).toThrow();
-    expect(() => detectType('loki diagram')).toThrow(
-      'No diagram type detected for text: loki diagram'
+    expect(() => getDiagram('loki')).toThrowErrorMatchingInlineSnapshot(
+      '"Diagram loki not found."'
+    );
+    expect(() => detectType('loki diagram')).toThrowErrorMatchingInlineSnapshot(
+      '"No diagram type detected for text: loki diagram"'
     );
     const detector: DiagramDetector = (str: string) => {
       return str.match('loki') !== null;
diff --git a/packages/mermaid/src/mermaid.spec.ts b/packages/mermaid/src/mermaid.spec.ts
index 58d39c348..14735bceb 100644
--- a/packages/mermaid/src/mermaid.spec.ts
+++ b/packages/mermaid/src/mermaid.spec.ts
@@ -151,7 +151,11 @@ describe('when using mermaid and ', () => {
 
   describe('checking validity of input ', () => {
     it('should throw for an invalid definition', async () => {
-      await expect(mermaid.parse('this is not a mermaid diagram definition')).rejects.toThrow();
+      await expect(
+        mermaid.parse('this is not a mermaid diagram definition')
+      ).rejects.toThrowErrorMatchingInlineSnapshot(
+        '"No diagram type detected for text: this is not a mermaid diagram definition"'
+      );
     });
 
     it('should not throw for a valid flow definition', async () => {
@@ -160,7 +164,12 @@ describe('when using mermaid and ', () => {
       ).resolves.not.toThrow();
     });
     it('should throw for an invalid flow definition', async () => {
-      await expect(mermaid.parse('graph TQ;A--x|text including URL space|B;')).rejects.toThrow();
+      await expect(mermaid.parse('graph TQ;A--x|text including URL space|B;')).rejects
+        .toThrowErrorMatchingInlineSnapshot(`
+        "Lexical error on line 1. Unrecognized text.
+        graph TQ;A--x|text includ
+        -----^"
+      `);
     });
 
     it('should not throw for a valid sequenceDiagram definition (mmds1)', async () => {
@@ -188,7 +197,12 @@ describe('when using mermaid and ', () => {
         'else isSick\n' +
         'Bob-->Alice: Feel sick...\n' +
         'end';
-      await expect(mermaid.parse(text)).rejects.toThrow();
+      await expect(mermaid.parse(text)).rejects.toThrowErrorMatchingInlineSnapshot(`
+        "Parse error on line 2:
+        ...equenceDiagramAlice:->Bob: Hello Bob, h...
+        ----------------------^
+        Expecting 'SOLID_OPEN_ARROW', 'DOTTED_OPEN_ARROW', 'SOLID_ARROW', 'DOTTED_ARROW', 'SOLID_CROSS', 'DOTTED_CROSS', 'SOLID_POINT', 'DOTTED_POINT', got 'TXT'"
+      `);
     });
 
     it('should return false for invalid definition WITH a parseError() callback defined', async () => {
@@ -196,7 +210,11 @@ describe('when using mermaid and ', () => {
       mermaid.setParseErrorHandler(() => {
         parseErrorWasCalled = true;
       });
-      await expect(mermaid.parse('this is not a mermaid diagram definition')).rejects.toThrow();
+      await expect(
+        mermaid.parse('this is not a mermaid diagram definition')
+      ).rejects.toThrowErrorMatchingInlineSnapshot(
+        '"No diagram type detected for text: this is not a mermaid diagram definition"'
+      );
       expect(parseErrorWasCalled).toEqual(true);
     });
   });
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index 0b6807b3c..49e849148 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -162,7 +162,7 @@ const runThrowsErrors = async function (
       log.debug('Detected early reinit: ', init);
     }
     try {
-      const { svg, bindFunctions } = await mermaidAPI.render(id, txt, element);
+      const { svg, bindFunctions } = await render(id, txt, element);
       element.innerHTML = svg;
       if (postRenderCallback) {
         await postRenderCallback(id);
@@ -313,7 +313,7 @@ const executeQueue = async () => {
  */
 const parse = async (text: string, parseOptions?: ParseOptions): Promise<boolean | void> => {
   return new Promise((resolve, reject) => {
-    // This promise will resolve when the mermaidAPI.render call is done.
+    // This promise will resolve when the render call is done.
     // It will be queued first and will be executed when it is first in line
     const performCall = () =>
       new Promise((res, rej) => {
