diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 55e06f46d3..aff5852dbb 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -32,6 +32,7 @@ jobs:
       # and run all Cypress tests
       - name: Cypress run
         uses: cypress-io/github-action@v4
+        id: cypress
         # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
         # Otherwise (e.g. if running from fork), we run on a single container only
         if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
@@ -44,3 +45,10 @@ jobs:
           parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+
+      - name: Upload Artifacts
+        uses: actions/upload-artifact@v3
+        if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
+        with:
+          name: error-snapshots
+          path: cypress/snapshots/**/__diff_output__/*
diff --git a/.vite/build.ts b/.vite/build.ts
index 6c7e85827f..1261e375ba 100644
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -41,11 +41,6 @@ const packageOptions = {
     packageName: 'mermaid-mindmap',
     file: 'detector.ts',
   },
-  'mermaid-flowchart-v3': {
-    name: 'mermaid-flowchart-v3',
-    packageName: 'mermaid-flowchart-v3',
-    file: 'detector.ts',
-  },
   // 'mermaid-example-diagram-detector': {
   //   name: 'mermaid-example-diagram-detector',
   //   packageName: 'mermaid-example-diagram',
@@ -125,7 +120,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
   if (watch && config.build) {
     config.build.watch = {
       include: [
-        'packages/mermaid-flowchart-v3/src/**',
         'packages/mermaid-mindmap/src/**',
         'packages/mermaid/src/**',
         // 'packages/mermaid-example-diagram/src/**',
@@ -154,7 +148,6 @@ const main = async () => {
 if (watch) {
   build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
   if (!mermaidOnly) {
-    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-flowchart-v3' }));
     build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
     // build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
   }
diff --git a/cSpell.json b/cSpell.json
index c6660c4dcb..26550c527f 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -6,6 +6,7 @@
     "adamiecki",
     "alois",
     "antiscript",
+    "appli",
     "applitools",
     "asciidoctor",
     "ashish",
@@ -13,6 +14,7 @@
     "bbox",
     "bilkent",
     "bisheng",
+    "blrs",
     "braintree",
     "brkt",
     "brolin",
@@ -54,8 +56,10 @@
     "knut",
     "laganeckas",
     "lintstagedrc",
+    "logmsg",
     "lucida",
     "matthieu",
+    "mdast",
     "mdbook",
     "mermerd",
     "mindaugas",
diff --git a/cypress/helpers/util.js b/cypress/helpers/util.js
index 5213f634ab..533cca499c 100644
--- a/cypress/helpers/util.js
+++ b/cypress/helpers/util.js
@@ -2,7 +2,7 @@ const utf8ToB64 = (str) => {
   return window.btoa(unescape(encodeURIComponent(str)));
 };
 
-const batchId = 'mermid-batch' + new Date().getTime();
+const batchId = 'mermaid-batch' + new Date().getTime();
 
 export const mermaidUrl = (graphStr, options, api) => {
   const obj = {
@@ -46,69 +46,26 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
   if (!options.fontSize) {
     options.fontSize = '16px';
   }
-  const useAppli = Cypress.env('useAppli');
-  cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
-  const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
-
-  if (useAppli) {
-    cy.log('Opening eyes ' + Cypress.spec.name + ' --- ' + name);
-    cy.eyesOpen({
-      appName: 'Mermaid',
-      testName: name,
-      batchName: Cypress.spec.name,
-      batchId: batchId + Cypress.spec.name,
-    });
-  }
-
   const url = mermaidUrl(graphStr, options, api);
-
-  cy.visit(url);
-  if (validation) {
-    cy.get('svg').should(validation);
-  }
-  cy.get('svg');
-  // Default name to test title
-
-  if (useAppli) {
-    cy.log('Check eyes' + Cypress.spec.name);
-    cy.eyesCheckWindow('Click!');
-    cy.log('Closing eyes: ' + Cypress.spec.name);
-    cy.eyesClose();
-  } else {
-    cy.matchImageSnapshot(name);
-  }
+  openURLAndVerifyRendering(url, options, validation);
 };
 
 export const urlSnapshotTest = (url, _options, api = false, validation) => {
-  cy.log(_options);
   const options = Object.assign(_options);
-  if (!options.fontFamily) {
-    options.fontFamily = 'courier';
-  }
-  if (!options.sequence) {
-    options.sequence = {};
-  }
-  if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) {
-    options.sequence.actorFontFamily = 'courier';
-  }
-  if (options.sequence && !options.sequence.noteFontFamily) {
-    options.sequence.noteFontFamily = 'courier';
-  }
-  options.sequence.actorFontFamily = 'courier';
-  options.sequence.noteFontFamily = 'courier';
-  options.sequence.messageFontFamily = 'courier';
-  if (options.sequence && !options.sequence.actorFontFamily) {
-    options.sequence.actorFontFamily = 'courier';
-  }
-  if (!options.fontSize) {
-    options.fontSize = '16px';
-  }
+  openURLAndVerifyRendering(url, options, validation);
+};
+
+export const renderGraph = (graphStr, options, api) => {
+  const url = mermaidUrl(graphStr, options, api);
+  openURLAndVerifyRendering(url, options);
+};
+
+const openURLAndVerifyRendering = (url, options, validation = undefined) => {
   const useAppli = Cypress.env('useAppli');
-  cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
   const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   if (useAppli) {
-    cy.log('Opening eyes 2' + Cypress.spec.name);
+    cy.log('Opening eyes ' + Cypress.spec.name + ' --- ' + name);
     cy.eyesOpen({
       appName: 'Mermaid',
       testName: name,
@@ -118,24 +75,19 @@ export const urlSnapshotTest = (url, _options, api = false, validation) => {
   }
 
   cy.visit(url);
+  cy.window().should('have.property', 'rendered', true);
+  cy.get('svg').should('be.visible');
+
   if (validation) {
     cy.get('svg').should(validation);
   }
-  cy.get('body');
-  // Default name to test title
 
   if (useAppli) {
-    cy.log('Check eyes 2' + Cypress.spec.name);
+    cy.log('Check eyes' + Cypress.spec.name);
     cy.eyesCheckWindow('Click!');
-    cy.log('Closing eyes 2' + Cypress.spec.name);
+    cy.log('Closing eyes' + Cypress.spec.name);
     cy.eyesClose();
   } else {
     cy.matchImageSnapshot(name);
   }
 };
-
-export const renderGraph = (graphStr, options, api) => {
-  const url = mermaidUrl(graphStr, options, api);
-
-  cy.visit(url);
-};
diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js
new file mode 100644
index 0000000000..0d4ec42110
--- /dev/null
+++ b/cypress/integration/rendering/flowchart-elk.spec.js
@@ -0,0 +1,687 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+
+describe('Flowchart ELK', () => {
+  it('1-elk: should render a simple flowchart', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      {}
+    );
+    imgSnapshotTest(
+      `flowchart TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { defaultRenderer: 'elk' } }
+    );
+  });
+
+  it('2-elk: should render a simple flowchart with diagramPadding set to 0', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      %% this is a comment
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { diagramPadding: 0 } }
+    );
+  });
+
+  it('3-elk: a link with correct arrowhead to a subgraph', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+        P1
+        P1 -->P1.5
+        subgraph P1.5
+          P2
+          P2.5(( A ))
+          P3
+        end
+        P2 --> P4
+        P3 --> P6
+        P1.5 --> P5
+      `,
+      {}
+    );
+  });
+
+  it('4-elk: Length of edges', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+      L1 --- L2
+      L2 --- C
+      M1 ---> C
+      R1 .-> R2
+      R2 <.-> C
+      C -->|Label 1| E1
+      C <-- Label 2 ---> E2
+      C ----> E3
+      C <-...-> E4
+      C ======> E5
+      `,
+      {}
+    );
+  });
+  it('5-elk: should render escaped without html labels', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+        a["<strong>Haiya</strong>"]---->b
+      `,
+      { htmlLabels: false, flowchart: { htmlLabels: false } }
+    );
+  });
+  it('6-elk: should render non-escaped with html labels', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+        a["<strong>Haiya</strong>"]===>b
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('7-elk: should render a flowchart when useMaxWidth is true (default)', () => {
+    renderGraph(
+      `flowchart-elk TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { useMaxWidth: true } }
+    );
+    cy.get('svg').should((svg) => {
+      expect(svg).to.have.attr('width', '100%');
+      // expect(svg).to.have.attr('height');
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      // const height = parseFloat(svg.attr('height'));
+      // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+      const style = svg.attr('style');
+      expect(style).to.match(/^max-width: [\d.]+px;$/);
+      const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+      expect(maxWidthValue).to.be.within(230 * 0.95, 230 * 1.05);
+    });
+  });
+  it('8-elk: should render a flowchart when useMaxWidth is false', () => {
+    renderGraph(
+      `flowchart-elk TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { useMaxWidth: false } }
+    );
+    cy.get('svg').should((svg) => {
+      // const height = parseFloat(svg.attr('height'));
+      const width = parseFloat(svg.attr('width'));
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+      expect(width).to.be.within(230 * 0.95, 230 * 1.05);
+      expect(svg).to.not.have.attr('style');
+    });
+  });
+
+  it('V2 elk - 16: Render Stadium shape', () => {
+    imgSnapshotTest(
+      ` flowchart-elk TD
+      A([stadium shape test])
+      A -->|Get money| B([Go shopping])
+      B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
+      C -->|One| D([Laptop])
+      C -->|Two| E([iPhone])
+      C -->|Three| F([Car<br/>wroom wroom])
+      click A "index.html#link-clicked" "link test"
+      click B testClick "click test"
+      classDef someclass fill:#f96;
+      class A someclass;
+      class C someclass;
+      `,
+      { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
+    );
+  });
+
+  it('50-elk: handle nested subgraphs in reverse order', () => {
+    imgSnapshotTest(
+      `flowchart-elk LR
+        a -->b
+        subgraph A
+        B
+        end
+        subgraph B
+        b
+        end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('51-elk: handle nested subgraphs in reverse order', () => {
+    imgSnapshotTest(
+      `flowchart-elk LR
+        a -->b
+        subgraph A
+        B
+        end
+        subgraph B
+        b
+        end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('52-elk: handle nested subgraphs in several levels', () => {
+    imgSnapshotTest(
+      `flowchart-elk TB
+    b-->B
+    a-->c
+    subgraph O
+      A
+    end
+    subgraph B
+      c
+    end
+    subgraph A
+        a
+        b
+        B
+    end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('53-elk: handle nested subgraphs with edges in and out', () => {
+    imgSnapshotTest(
+      `flowchart-elk TB
+  internet
+  nat
+  routeur
+  lb1
+  lb2
+  compute1
+  compute2
+  subgraph project
+  routeur
+  nat
+    subgraph subnet1
+      compute1
+      lb1
+    end
+    subgraph subnet2
+      compute2
+      lb2
+    end
+  end
+  internet --> routeur
+  routeur --> subnet1 & subnet2
+  subnet1 & subnet2 --> nat --> internet
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('54-elk: handle nested subgraphs with outgoing links', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+  subgraph  main
+    subgraph subcontainer
+      subcontainer-child
+    end
+     subcontainer-child--> subcontainer-sibling
+  end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('55-elk: handle nested subgraphs with outgoing links 2', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+
+subgraph one[One]
+    subgraph sub_one[Sub One]
+        _sub_one
+    end
+    subgraph sub_two[Sub Two]
+        _sub_two
+    end
+    _one
+end
+
+%% here, either the first or the second one
+sub_one --> sub_two
+_one --> b
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('56-elk: handle nested subgraphs with outgoing links 3', () => {
+    imgSnapshotTest(
+      `flowchart-elk TB
+  subgraph container_Beta
+    process_C-->Process_D
+  end
+  subgraph container_Alpha
+    process_A-->process_B
+    process_A-->|messages|process_C
+    end
+    process_B-->|via_AWSBatch|container_Beta
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('57-elk: handle nested subgraphs with outgoing links 4', () => {
+    imgSnapshotTest(
+      `flowchart-elk LR
+subgraph A
+a -->b
+end
+subgraph B
+b
+end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('57-elk: handle nested subgraphs with outgoing links 2', () => {
+    imgSnapshotTest(
+      `flowchart-elk TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+    one --> two
+    three --> two
+    two --> c2
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('57.x: handle nested subgraphs with outgoing links 5', () => {
+    imgSnapshotTest(
+      `%% this does not produce the desired result
+flowchart-elk TB
+  subgraph container_Beta
+    process_C-->Process_D
+  end
+  subgraph container_Alpha
+    process_A-->process_B
+    process_B-->|via_AWSBatch|container_Beta
+    process_A-->|messages|process_C
+  end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('58-elk: handle styling with style expressions', () => {
+    imgSnapshotTest(
+      `
+    flowchart-elk LR
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('59-elk: handle styling of subgraphs and links', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk TD
+  A[Christmas] ==> D
+  A[Christmas] -->|Get money| B(Go shopping)
+  A[Christmas] ==> C
+  subgraph T ["Test"]
+    A
+    B
+    C
+  end
+
+  classDef Test fill:#F84E68,stroke:#333,color:white;
+  class A,T Test
+  classDef TestSub fill:green;
+  class T TestSub
+  linkStyle 0,1 color:orange, stroke: orange;
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('60-elk: handle styling for all node shapes - v2', () => {
+    imgSnapshotTest(
+      `
+      flowchart-elk LR
+      A[red text] -->|default style| B(blue text)
+      C([red text]) -->|default style| D[[blue text]]
+      E[(red text)] -->|default style| F((blue text))
+      G>red text] -->|default style| H{blue text}
+      I{{red text}} -->|default style| J[/blue text/]
+      K[\\ red text\\] -->|default style| L[/blue text\\]
+      M[\\ red text/] -->|default style| N[blue text];
+      O(((red text))) -->|default style| P(((blue text)));
+      linkStyle default color:Sienna;
+      style A stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style B stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style C stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style D stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style E stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style F stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style G stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style H stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style I stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style J stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style K stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style L stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style M stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style N stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style O stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style P stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose', logLevel: 2 }
+    );
+  });
+  it('61-elk: fontawesome icons in edge labels', () => {
+    imgSnapshotTest(
+      `
+      flowchart-elk TD
+        C -->|fa:fa-car Car| F[fa:fa-car Car]
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('62-elk: should render styled subgraphs', () => {
+    imgSnapshotTest(
+      `
+      flowchart-elk TB
+      A
+      B
+      subgraph foo[Foo SubGraph]
+        C
+        D
+      end
+      subgraph bar[Bar SubGraph]
+        E
+        F
+      end
+      G
+
+      A-->B
+      B-->C
+      C-->D
+      B-->D
+      D-->E
+      E-->A
+      E-->F
+      F-->D
+      F-->G
+      B-->G
+      G-->D
+
+      style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
+      style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('63-elk: title on subgraphs should be themable', () => {
+    imgSnapshotTest(
+      `
+      %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
+      flowchart-elk LR
+      subgraph A
+          a --> b
+      end
+      subgraph B
+          i -->f
+      end
+      A --> B
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('65-elk: text-color from classes', () => {
+    imgSnapshotTest(
+      `
+      flowchart-elk LR
+        classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff
+        Lorem --> Ipsum --> Dolor
+        class Lorem,Dolor dark
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('66-elk: More nested subgraph cases (TB)', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk TB
+    subgraph two
+    b1
+    end
+    subgraph three
+    c2
+    end
+
+    three --> two
+    two --> c2
+
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('67-elk: More nested subgraph cases (RL)', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk RL
+    subgraph two
+    b1
+    end
+    subgraph three
+    c2
+    end
+
+    three --> two
+    two --> c2
+
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('68-elk: More nested subgraph cases (BT)', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk BT
+    subgraph two
+    b1
+    end
+    subgraph three
+    c2
+    end
+
+    three --> two
+    two --> c2
+
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('69-elk: More nested subgraph cases (LR)', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk LR
+    subgraph two
+    b1
+    end
+    subgraph three
+    c2
+    end
+
+    three --> two
+    two --> c2
+
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('70-elk: Handle nested subgraph cases (TB) link out and link between subgraphs', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk TB
+   subgraph S1
+    sub1 -->sub2
+   end
+  subgraph S2
+    sub4
+   end
+   S1 --> S2
+   sub1 --> sub4
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('71-elk: Handle nested subgraph cases (RL) link out and link between subgraphs', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk RL
+   subgraph S1
+    sub1 -->sub2
+   end
+  subgraph S2
+    sub4
+   end
+   S1 --> S2
+   sub1 --> sub4
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('72-elk: Handle nested subgraph cases (BT) link out and link between subgraphs', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk BT
+   subgraph S1
+    sub1 -->sub2
+   end
+  subgraph S2
+    sub4
+   end
+   S1 --> S2
+   sub1 --> sub4
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('74-elk: Handle nested subgraph cases (RL) link out and link between subgraphs', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk RL
+   subgraph S1
+    sub1 -->sub2
+   end
+  subgraph S2
+    sub4
+   end
+   S1 --> S2
+   sub1 --> sub4
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('74-elk: Handle labels for multiple edges from and to the same couple of nodes', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk RL
+    subgraph one
+      a1 -- l1 --> a2
+      a1 -- l2 --> a2
+    end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('76-elk: handle unicode encoded character with HTML labels true', () => {
+    imgSnapshotTest(
+      `flowchart-elk TB
+      a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
+      --> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('2050-elk: handling of different rendering direction in subgraphs', () => {
+    imgSnapshotTest(
+      `
+    flowchart-elk LR
+
+      subgraph TOP
+        direction TB
+        subgraph B1
+            direction RL
+            i1 -->f1
+        end
+        subgraph B2
+            direction BT
+            i2 -->f2
+        end
+      end
+      A --> TOP --> B
+      B1 --> B2
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('2388-elk: handling default in the node name', () => {
+    imgSnapshotTest(
+      `
+      flowchart-elk LR
+      default-index.js --> dot.template.js
+      index.js --> module-utl.js
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('2824-elk: Clipping of edges', () => {
+    imgSnapshotTest(
+      `
+      flowchart-elk TD
+          A --> B
+          A --> C
+          B --> C
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('1433-elk: should render a titled flowchart with titleTopMargin set to 0', () => {
+    imgSnapshotTest(
+      `---
+title: Simple flowchart
+---
+flowchart-elk TD
+A --> B
+`,
+      { titleTopMargin: 0 }
+    );
+  });
+});
diff --git a/cypress/integration/rendering/mindmap.spec.ts b/cypress/integration/rendering/mindmap.spec.ts
index 62c7e785b6..4663f6225b 100644
--- a/cypress/integration/rendering/mindmap.spec.ts
+++ b/cypress/integration/rendering/mindmap.spec.ts
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 /**
  * Check whether the SVG Element has a Mindmap root
@@ -158,7 +158,6 @@ mindmap
       undefined,
       shouldHaveRoot
     );
-    cy.get('svg');
   });
   it('rounded rect shape', () => {
     imgSnapshotTest(
@@ -172,7 +171,6 @@ mindmap
       undefined,
       shouldHaveRoot
     );
-    cy.get('svg');
   });
   it('circle shape', () => {
     imgSnapshotTest(
@@ -186,7 +184,6 @@ mindmap
       undefined,
       shouldHaveRoot
     );
-    cy.get('svg');
   });
   it('default shape', () => {
     imgSnapshotTest(
@@ -198,7 +195,6 @@ mindmap
       undefined,
       shouldHaveRoot
     );
-    cy.get('svg');
   });
   it('adding children', () => {
     imgSnapshotTest(
@@ -212,7 +208,6 @@ mindmap
       undefined,
       shouldHaveRoot
     );
-    cy.get('svg');
   });
   it('adding grand children', () => {
     imgSnapshotTest(
@@ -227,7 +222,6 @@ mindmap
       undefined,
       shouldHaveRoot
     );
-    cy.get('svg');
   });
   /* The end */
 });
diff --git a/cypress/platform/external-diagrams-mindmap.html b/cypress/platform/external-diagrams-mindmap.html
index e5eded4ba0..e445a7627c 100644
--- a/cypress/platform/external-diagrams-mindmap.html
+++ b/cypress/platform/external-diagrams-mindmap.html
@@ -44,6 +44,9 @@ <h1>Should correctly load a third-party diagram using registerDiagram</h1>
       await mermaid.registerExternalDiagrams([mindmap]);
       await mermaid.initialize({ logLevel: 0 });
       await mermaid.initThrowsErrorsAsync();
+      if (window.Cypress) {
+        window.rendered = true;
+      }
     </script>
   </body>
 </html>
diff --git a/cypress/platform/ghsa1.html b/cypress/platform/ghsa1.html
index 890a8e0dd2..59c316eb36 100644
--- a/cypress/platform/ghsa1.html
+++ b/cypress/platform/ghsa1.html
@@ -21,6 +21,9 @@ <h1>Background should be yellow!!!</h1>
       const diagram = document.getElementById('diagram');
       const svg = mermaid.render('diagram-svg', graph);
       diagram.innerHTML = svg;
+      if (window.Cypress) {
+        window.rendered = true;
+      }
     </script>
   </body>
 </html>
diff --git a/cypress/platform/ghsa2.html b/cypress/platform/ghsa2.html
index 6d4dccca32..3ff69158bb 100644
--- a/cypress/platform/ghsa2.html
+++ b/cypress/platform/ghsa2.html
@@ -21,6 +21,9 @@ <h1>This element does not belong to the SVG but we can style it</h1>
       const diagram = document.getElementById('diagram');
       const svg = mermaid.render('diagram-svg', graph);
       diagram.innerHTML = svg;
+      if (window.Cypress) {
+        window.rendered = true;
+      }
     </script>
   </body>
 </html>
diff --git a/cypress/platform/ghsa3.html b/cypress/platform/ghsa3.html
index 63dfa0d01e..79fa401316 100644
--- a/cypress/platform/ghsa3.html
+++ b/cypress/platform/ghsa3.html
@@ -94,6 +94,9 @@ <h1>PAGE SHOULD NOT BE RED</h1>
       // document.querySelector('#diagram').innerHTML = diagram;
       mermaid.render('diagram', diagram, (res) => {
         document.querySelector('#res').innerHTML = res;
+        if (window.Cypress) {
+          window.rendered = true;
+        }
       });
     </script>
   </body>
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 5e1f4d76b3..afc12dbe93 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -63,6 +63,13 @@
       c --> d
     </pre>
     <pre id="diagram" class="mermaid">
+flowchart-elk TB
+      a --> b
+      a --> c
+      b --> d
+      c --> d
+    </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
@@ -238,10 +245,9 @@
 
     <script type="module">
       import mindmap from '../../packages/mermaid-mindmap/src/detector';
-      import flowV3 from '../../packages/mermaid-flowchart-v3/src/detector';
       // import example from '../../packages/mermaid-example-diagram/src/detector';
       import mermaid from '../../packages/mermaid/src/mermaid';
-      await mermaid.registerExternalDiagrams([mindmap, flowV3]);
+      await mermaid.registerExternalDiagrams([mindmap]);
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
index c06976e972..c10ae73b1b 100644
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@@ -5,6 +5,13 @@ function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));
 }
 
+// Adds a rendered flag to window when rendering is done, so cypress can wait for it.
+function markRendered() {
+  if (window.Cypress) {
+    window.rendered = true;
+  }
+}
+
 /**
  * ##contentLoaded Callback function that is called when page is loaded. This functions fetches
  * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
@@ -39,7 +46,8 @@ const contentLoaded = async function () {
 
     await mermaid2.registerExternalDiagrams([mindmap]);
     mermaid2.initialize(graphObj.mermaid);
-    mermaid2.init();
+    await mermaid2.init();
+    markRendered();
   }
 };
 
@@ -128,6 +136,7 @@ const contentLoadedApi = function () {
       );
     }
   }
+  markRendered();
 };
 
 if (typeof document !== 'undefined') {
diff --git a/packages/mermaid-flowchart-v3/package.json b/packages/mermaid-flowchart-v3/package.json
deleted file mode 100644
index 819b64db50..0000000000
--- a/packages/mermaid-flowchart-v3/package.json
+++ /dev/null
@@ -1,65 +0,0 @@
-{
-  "name": "@mermaid-js/mermaid-flowchart-v3",
-  "version": "9.4.0",
-  "description": "An extension for the Mermaid diagramming library that utilizes elkjs for layout, enabling the creation of visually appealing and easy-to-understand flowcharts.",
-  "module": "dist/mermaid-flowchart-v3.core.mjs",
-  "types": "dist/detector.d.ts",
-  "type": "module",
-  "exports": {
-    ".": {
-      "import": "./dist/mermaid-flowchart-v3.core.mjs",
-      "types": "./dist/detector.d.ts"
-    },
-    "./*": "./*"
-  },
-  "keywords": [
-    "diagram",
-    "markdown",
-    "flowchart",
-    "mermaid",
-    "elkjs"
-  ],
-  "scripts": {
-    "prepublishOnly": "pnpm -w run build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mermaid-js/mermaid"
-  },
-  "author": "Knut Sveidqvist",
-  "license": "MIT",
-  "standard": {
-    "ignore": [
-      "**/parser/*.js",
-      "dist/**/*.js",
-      "cypress/**/*.js"
-    ],
-    "globals": [
-      "page"
-    ]
-  },
-  "dependencies": {
-    "@braintree/sanitize-url": "^6.0.0",
-    "graphlib": "^2.1.0",
-    "dagre-d3-es": "7.0.6",
-    "elkjs": "^0.8.2",
-    "d3": "^7.0.0",
-    "khroma": "^2.0.0",
-    "non-layered-tidy-tree-layout": "^2.0.2"
-  },
-  "devDependencies": {
-    "concurrently": "^7.5.0",
-    "mermaid": "workspace:*",
-    "rimraf": "^3.0.2"
-  },
-  "resolutions": {
-    "d3": "^7.0.0"
-  },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": [
-    "**/*.css",
-    "**/*.scss"
-  ]
-}
diff --git a/packages/mermaid-flowchart-v3/src/detector.ts b/packages/mermaid-flowchart-v3/src/detector.ts
deleted file mode 100644
index 5ec09114ad..0000000000
--- a/packages/mermaid-flowchart-v3/src/detector.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { ExternalDiagramDefinition } from 'mermaid';
-
-const id = 'flowchart-v3';
-
-const detector = (txt: string, config) => {
-  if (config?.flowchart?.defaultRenderer === 'dagre-d3') {
-    return false;
-  }
-  if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') {
-    return false;
-  }
-
-  // If we have configured to use dagre-wrapper then we should return true in this function for graph code thus making it use the new flowchart diagram
-  if (txt.match(/^\s*graph/) !== null) {
-    return true;
-  }
-  return txt.match(/^\s*flowchart/) !== null;
-};
-
-const loader = async () => {
-  const { diagram } = await import('./diagram-definition');
-  return { id, diagram };
-};
-
-const plugin: ExternalDiagramDefinition = {
-  id,
-  detector,
-  loader,
-};
-
-export default plugin;
diff --git a/packages/mermaid-flowchart-v3/src/diagram-definition.ts b/packages/mermaid-flowchart-v3/src/diagram-definition.ts
deleted file mode 100644
index bfaf2ab563..0000000000
--- a/packages/mermaid-flowchart-v3/src/diagram-definition.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// @ts-ignore: TODO Fix ts errors
-import parser from '../../mermaid/src/diagrams/flowchart/parser/flow';
-import * as db from '../../mermaid/src/diagrams/flowchart/flowDb';
-import renderer from './flowRenderer-v3';
-import styles from './styles';
-import { injectUtils } from './mermaidUtils';
-
-export const diagram = {
-  db,
-  renderer,
-  parser,
-  styles,
-  injectUtils,
-};
diff --git a/packages/mermaid-flowchart-v3/src/flowRenderer-v3-cyto.js b/packages/mermaid-flowchart-v3/src/flowRenderer-v3-cyto.js
deleted file mode 100644
index 2a0d0fc231..0000000000
--- a/packages/mermaid-flowchart-v3/src/flowRenderer-v3-cyto.js
+++ /dev/null
@@ -1,756 +0,0 @@
-import graphlib from 'graphlib';
-import { select, line, curveLinear, curveCardinal, curveBasis, selectAll } from 'd3';
-import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
-import { insertNode } from '../../mermaid/src/dagre-wrapper/nodes.js';
-import insertMarkers from '../../mermaid/src/dagre-wrapper/markers.js';
-import dagre from 'cytoscape-dagre';
-
-// Replace with other function to avoid dependency to dagre-d3
-import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
-
-import common, { evaluate } from '../../mermaid/src/diagrams/common/common';
-import { interpolateToCurve, getStylesFromArray } from '../../mermaid/src/utils';
-
-import cytoscape from 'cytoscape';
-cytoscape.use(dagre);
-
-const conf = {};
-export const setConf = function (cnf) {
-  const keys = Object.keys(cnf);
-  for (const key of keys) {
-    conf[key] = cnf[key];
-  }
-};
-
-// /**
-//  * Function that adds the vertices found during parsing to the graph to be rendered.
-//  *
-//  * @param vert Object containing the vertices.
-//  * @param g The graph that is to be drawn.
-//  * @param svgId
-//  * @param root
-//  * @param doc
-//  * @param diagObj
-//  */
-export const addVertices = function (vert, svgId, root, doc, diagObj, parentLookUpDb, graph) {
-  const svg = root.select(`[id="${svgId}"]`);
-  const nodes = svg.insert('g').attr('class', 'nodes');
-  const keys = Object.keys(vert);
-
-  // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
-  keys.forEach(function (id) {
-    const vertex = vert[id];
-
-    /**
-     * Variable for storing the classes for the vertex
-     *
-     * @type {string}
-     */
-    let classStr = 'default';
-    if (vertex.classes.length > 0) {
-      classStr = vertex.classes.join(' ');
-    }
-
-    const styles = getStylesFromArray(vertex.styles);
-
-    // Use vertex id as text in the box if no text is provided by the graph definition
-    let vertexText = vertex.text !== undefined ? vertex.text : vertex.id;
-
-    // We create a SVG label, either by delegating to addHtmlLabel or manually
-    let vertexNode;
-    if (evaluate(getConfig().flowchart.htmlLabels)) {
-      // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
-      const node = {
-        label: vertexText.replace(
-          /fa[blrs]?:fa-[\w-]+/g,
-          (s) => `<i class='${s.replace(':', ' ')}'></i>`
-        ),
-      };
-      vertexNode = addHtmlLabel(svg, node).node();
-      vertexNode.parentNode.removeChild(vertexNode);
-    } else {
-      const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
-      svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
-
-      const rows = vertexText.split(common.lineBreakRegex);
-
-      for (const row of rows) {
-        const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
-        tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
-        tspan.setAttribute('dy', '1em');
-        tspan.setAttribute('x', '1');
-        tspan.textContent = row;
-        svgLabel.appendChild(tspan);
-      }
-      vertexNode = svgLabel;
-    }
-
-    let radious = 0;
-    let _shape = '';
-    // Set the shape based parameters
-    switch (vertex.type) {
-      case 'round':
-        radious = 5;
-        _shape = 'rect';
-        break;
-      case 'square':
-        _shape = 'rect';
-        break;
-      case 'diamond':
-        _shape = 'question';
-        break;
-      case 'hexagon':
-        _shape = 'hexagon';
-        break;
-      case 'odd':
-        _shape = 'rect_left_inv_arrow';
-        break;
-      case 'lean_right':
-        _shape = 'lean_right';
-        break;
-      case 'lean_left':
-        _shape = 'lean_left';
-        break;
-      case 'trapezoid':
-        _shape = 'trapezoid';
-        break;
-      case 'inv_trapezoid':
-        _shape = 'inv_trapezoid';
-        break;
-      case 'odd_right':
-        _shape = 'rect_left_inv_arrow';
-        break;
-      case 'circle':
-        _shape = 'circle';
-        break;
-      case 'ellipse':
-        _shape = 'ellipse';
-        break;
-      case 'stadium':
-        _shape = 'stadium';
-        break;
-      case 'subroutine':
-        _shape = 'subroutine';
-        break;
-      case 'cylinder':
-        _shape = 'cylinder';
-        break;
-      case 'group':
-        _shape = 'rect';
-        break;
-      case 'doublecircle':
-        _shape = 'doublecircle';
-        break;
-      default:
-        _shape = 'rect';
-    }
-    // // Add the node
-    const node = {
-      labelStyle: styles.labelStyle,
-      shape: _shape,
-      labelText: vertexText,
-      rx: radious,
-      ry: radious,
-      class: classStr,
-      style: styles.style,
-      id: vertex.id,
-      link: vertex.link,
-      linkTarget: vertex.linkTarget,
-      tooltip: diagObj.db.getTooltip(vertex.id) || '',
-      domId: diagObj.db.lookUpDomId(vertex.id),
-      haveCallback: vertex.haveCallback,
-      width: vertex.type === 'group' ? 500 : undefined,
-      dir: vertex.dir,
-      type: vertex.type,
-      props: vertex.props,
-      padding: getConfig().flowchart.padding,
-    };
-    const nodeEl = insertNode(nodes, node, vertex.dir);
-    const boundingBox = nodeEl.node().getBBox();
-    const data = {
-      id: vertex.id,
-      labelStyle: styles.labelStyle,
-      shape: _shape,
-      labelText: vertexText,
-      rx: radious,
-      ry: radious,
-      class: classStr,
-      style: styles.style,
-      link: vertex.link,
-      linkTarget: vertex.linkTarget,
-      tooltip: diagObj.db.getTooltip(vertex.id) || '',
-      domId: diagObj.db.lookUpDomId(vertex.id),
-      haveCallback: vertex.haveCallback,
-      width: vertex.type === 'group' ? 500 : undefined,
-      dir: vertex.dir,
-      type: vertex.type,
-      props: vertex.props,
-      padding: getConfig().flowchart.padding,
-      boundingBox,
-      el: nodeEl,
-      parent: parentLookUpDb.parentById[vertex.id],
-    };
-    // if (!Object.keys(parentLookUpDb.childrenById).includes(vertex.id)) {
-    graph.elements.nodes.push({
-      group: 'nodes',
-      // data,
-      data,
-    });
-    // }
-    log.trace('setNode', {
-      labelStyle: styles.labelStyle,
-      shape: _shape,
-      labelText: vertexText,
-      rx: radious,
-      ry: radious,
-      class: classStr,
-      style: styles.style,
-      id: vertex.id,
-      domId: diagObj.db.lookUpDomId(vertex.id),
-      width: vertex.type === 'group' ? 500 : undefined,
-      type: vertex.type,
-      dir: vertex.dir,
-      props: vertex.props,
-      padding: getConfig().flowchart.padding,
-      parent: parentLookUpDb.parentById[vertex.id],
-    });
-  });
-  return graph;
-};
-
-/**
- * Add edges to graph based on parsed graph definition
- *
- * @param {object} edges The edges to add to the graph
- * @param {object} g The graph object
- * @param cy
- * @param diagObj
- * @param graph
- */
-export const addEdges = function (edges, diagObj, graph) {
-  // log.info('abc78 edges = ', edges);
-  let cnt = 0;
-  let linkIdCnt = {};
-
-  let defaultStyle;
-  let defaultLabelStyle;
-
-  if (edges.defaultStyle !== undefined) {
-    const defaultStyles = getStylesFromArray(edges.defaultStyle);
-    defaultStyle = defaultStyles.style;
-    defaultLabelStyle = defaultStyles.labelStyle;
-  }
-
-  edges.forEach(function (edge) {
-    cnt++;
-
-    // Identify Link
-    var linkIdBase = 'L-' + edge.start + '-' + edge.end;
-    // count the links from+to the same node to give unique id
-    if (linkIdCnt[linkIdBase] === undefined) {
-      linkIdCnt[linkIdBase] = 0;
-      log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
-    } else {
-      linkIdCnt[linkIdBase]++;
-      log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
-    }
-    let linkId = linkIdBase + '-' + linkIdCnt[linkIdBase];
-    log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]);
-    var linkNameStart = 'LS-' + edge.start;
-    var linkNameEnd = 'LE-' + edge.end;
-
-    const edgeData = { style: '', labelStyle: '' };
-    edgeData.minlen = edge.length || 1;
-    //edgeData.id = 'id' + cnt;
-
-    // Set link type for rendering
-    if (edge.type === 'arrow_open') {
-      edgeData.arrowhead = 'none';
-    } else {
-      edgeData.arrowhead = 'normal';
-    }
-
-    // Check of arrow types, placed here in order not to break old rendering
-    edgeData.arrowTypeStart = 'arrow_open';
-    edgeData.arrowTypeEnd = 'arrow_open';
-
-    /* eslint-disable no-fallthrough */
-    switch (edge.type) {
-      case 'double_arrow_cross':
-        edgeData.arrowTypeStart = 'arrow_cross';
-      case 'arrow_cross':
-        edgeData.arrowTypeEnd = 'arrow_cross';
-        break;
-      case 'double_arrow_point':
-        edgeData.arrowTypeStart = 'arrow_point';
-      case 'arrow_point':
-        edgeData.arrowTypeEnd = 'arrow_point';
-        break;
-      case 'double_arrow_circle':
-        edgeData.arrowTypeStart = 'arrow_circle';
-      case 'arrow_circle':
-        edgeData.arrowTypeEnd = 'arrow_circle';
-        break;
-    }
-
-    let style = '';
-    let labelStyle = '';
-
-    switch (edge.stroke) {
-      case 'normal':
-        style = 'fill:none;';
-        if (defaultStyle !== undefined) {
-          style = defaultStyle;
-        }
-        if (defaultLabelStyle !== undefined) {
-          labelStyle = defaultLabelStyle;
-        }
-        edgeData.thickness = 'normal';
-        edgeData.pattern = 'solid';
-        break;
-      case 'dotted':
-        edgeData.thickness = 'normal';
-        edgeData.pattern = 'dotted';
-        edgeData.style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
-        break;
-      case 'thick':
-        edgeData.thickness = 'thick';
-        edgeData.pattern = 'solid';
-        edgeData.style = 'stroke-width: 3.5px;fill:none;';
-        break;
-    }
-    if (edge.style !== undefined) {
-      const styles = getStylesFromArray(edge.style);
-      style = styles.style;
-      labelStyle = styles.labelStyle;
-    }
-
-    edgeData.style = edgeData.style += style;
-    edgeData.labelStyle = edgeData.labelStyle += labelStyle;
-
-    if (edge.interpolate !== undefined) {
-      edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
-    } else if (edges.defaultInterpolate !== undefined) {
-      edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
-    } else {
-      edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
-    }
-
-    if (edge.text === undefined) {
-      if (edge.style !== undefined) {
-        edgeData.arrowheadStyle = 'fill: #333';
-      }
-    } else {
-      edgeData.arrowheadStyle = 'fill: #333';
-      edgeData.labelpos = 'c';
-    }
-
-    edgeData.labelType = 'text';
-    edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
-
-    if (edge.style === undefined) {
-      edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;';
-    }
-
-    edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
-
-    edgeData.id = linkId;
-    edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;
-
-    // Add the edge to the graph
-    graph.elements.edges.push({
-      group: 'edges',
-      data: { source: edge.start, target: edge.end, edgeData, id: cnt },
-    });
-  });
-  return graph;
-};
-
-const addmarkers = function (svgPath, edgeData, diagramType, arrowMarkerAbsolute) {
-  // // TODO: Can we load this config only from the rendered graph type?
-  let url;
-  if (arrowMarkerAbsolute) {
-    url =
-      window.location.protocol +
-      '//' +
-      window.location.host +
-      window.location.pathname +
-      window.location.search;
-    url = url.replace(/\(/g, '\\(');
-    url = url.replace(/\)/g, '\\)');
-  }
-  switch (edgeData.arrowTypeStart) {
-    case 'arrow_cross':
-      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-crossStart' + ')');
-      break;
-    case 'arrow_point':
-      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-pointStart' + ')');
-      break;
-    case 'arrow_barb':
-      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-barbStart' + ')');
-      break;
-    case 'arrow_circle':
-      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-circleStart' + ')');
-      break;
-    case 'aggregation':
-      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-aggregationStart' + ')');
-      break;
-    case 'extension':
-      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-extensionStart' + ')');
-      break;
-    case 'composition':
-      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-compositionStart' + ')');
-      break;
-    case 'dependency':
-      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-dependencyStart' + ')');
-      break;
-    case 'lollipop':
-      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-lollipopStart' + ')');
-      break;
-    default:
-  }
-  switch (edgeData.arrowTypeEnd) {
-    case 'arrow_cross':
-      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')');
-      break;
-    case 'arrow_point':
-      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-pointEnd' + ')');
-      break;
-    case 'arrow_barb':
-      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-barbEnd' + ')');
-      break;
-    case 'arrow_circle':
-      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-circleEnd' + ')');
-      break;
-    case 'aggregation':
-      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-aggregationEnd' + ')');
-      break;
-    case 'extension':
-      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-extensionEnd' + ')');
-      break;
-    case 'composition':
-      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-compositionEnd' + ')');
-      break;
-    case 'dependency':
-      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-dependencyEnd' + ')');
-      break;
-    case 'lollipop':
-      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-lollipopEnd' + ')');
-      break;
-    default:
-  }
-};
-
-/**
- * Returns the all the styles from classDef statements in the graph definition.
- *
- * @param text
- * @param diagObj
- * @returns {object} ClassDef styles
- */
-export const getClasses = function (text, diagObj) {
-  log.info('Extracting classes');
-  diagObj.db.clear('ver-2');
-  try {
-    // Parse the graph definition
-    diagObj.parse(text);
-    return diagObj.db.getClasses();
-  } catch (e) {
-    return;
-  }
-};
-
-const addSubGraphs = function (db) {
-  const parentLookUpDb = { parentById: {}, childrenById: {} };
-  const subgraphs = db.getSubGraphs();
-  log.info('Subgraphs - ', subgraphs);
-  subgraphs.forEach(function (subgraph) {
-    subgraph.nodes.forEach(function (node) {
-      parentLookUpDb.parentById[node] = subgraph.id;
-      if (parentLookUpDb.childrenById[subgraph.id] === undefined) {
-        parentLookUpDb.childrenById[subgraph.id] = [];
-      }
-      parentLookUpDb.childrenById[subgraph.id].push(node);
-    });
-  });
-
-  subgraphs.forEach(function (subgraph) {
-    const data = { id: subgraph.id };
-    if (parentLookUpDb.parentById[subgraph.id] !== undefined) {
-      data.parent = parentLookUpDb.parentById[subgraph.id];
-    }
-    // cy.add({
-    //   group: 'nodes',
-    //   data,
-    // });
-  });
-  return parentLookUpDb;
-};
-
-const insertEdge = function (edgesEl, edge, edgeData, bounds, diagObj) {
-  const src = edge.sourceEndpoint();
-  const segments = edge.segmentPoints();
-  // const dest = edge.target().position();
-  const dest = edge.targetEndpoint();
-  const segPoints = segments.map((segment) => [segment.x, segment.y]);
-  const points = [
-    [src.x, src.y],
-    [segments[0].x, segments[0].y],
-    [dest.x, dest.y],
-  ];
-  // console.log('Edge ctrl points:', edge.segmentPoints(), 'Bounds:', bounds, edge.source(), points);
-  // console.log('Edge ctrl points:', points);
-  const curve = line().curve(curveCardinal);
-  const edge2 = edgesEl
-    .insert('path')
-    .attr('d', curve(points))
-    .attr('class', 'path')
-    .attr('fill', 'none');
-  addmarkers(edge2, edgeData, diagObj.type, diagObj.arrowMarkerAbsolute);
-  // edgesEl
-  //   .append('circle')
-  //   .style('stroke', 'red')
-  //   .style('fill', 'red')
-  //   .attr('r', 1)
-  //   .attr('cx', src.x)
-  //   .attr('cy', src.y);
-  // edgesEl
-  //   .append('circle')
-  //   .style('stroke', 'white')
-  //   .style('fill', 'white')
-  //   .attr('r', 1)
-  //   .attr('cx', segments[0].x)
-  //   .attr('cy', segments[0].y);
-  // edgesEl
-  //   .append('circle')
-  //   .style('stroke', 'pink')
-  //   .style('fill', 'pink')
-  //   .attr('r', 1)
-  //   .attr('cx', dest.x)
-  //   .attr('cy', dest.y);
-};
-
-/**
- * Draws a flowchart in the tag with id: id based on the graph definition in text.
- *
- * @param text
- * @param id
- */
-
-export const draw = function (text, id, _version, diagObj) {
-  // Add temporary render element
-  diagObj.db.clear();
-  diagObj.db.setGen('gen-2');
-  // Parse the graph definition
-  diagObj.parser.parse(text);
-
-  return new Promise(function (resolve, reject) {
-    const renderEl = select('body').append('div').attr('style', 'height:400px').attr('id', 'cy');
-    // .attr('style', 'display:none')
-    let graph = {
-      styleEnabled: true,
-      // animate: false,
-      // ready: function () {
-      //   log.info('Ready', this);
-      // },
-      container: document.getElementById('cy'), // container to render in
-
-      boxSelectionEnabled: false,
-
-      style: [
-        {
-          selector: 'node',
-          css: {
-            content: 'data(id)',
-            'text-valign': 'center',
-            'text-halign': 'center',
-          },
-        },
-        {
-          selector: ':parent',
-          css: {
-            'text-valign': 'top',
-            'text-halign': 'center',
-          },
-        },
-        {
-          selector: 'edge',
-          css: {
-            'curve-style': 'bezier',
-            'target-arrow-shape': 'triangle',
-          },
-        },
-      ],
-
-      elements: {
-        nodes: [
-          { data: { id: 'a', parent: 'b' } },
-          { data: { id: 'b' } },
-          { data: { id: 'c', parent: 'b' } },
-          { data: { id: 'd' } },
-          { data: { id: 'e' } },
-          { data: { id: 'f', parent: 'e' } },
-        ],
-        edges: [
-          { data: { id: 'ad', source: 'a', target: 'd' } },
-          { data: { id: 'eb', source: 'e', target: 'b' } },
-        ],
-      },
-    };
-    log.info('Drawing flowchart using v3 renderer');
-    // Fetch the default direction, use TD if none was found
-    let dir = diagObj.db.getDirection();
-    if (dir === undefined) {
-      dir = 'TD';
-    }
-
-    const { securityLevel, flowchart: conf } = getConfig();
-
-    // Handle root and document for when rendering in sandbox mode
-    let sandboxElement;
-    if (securityLevel === 'sandbox') {
-      sandboxElement = select('#i' + id);
-    }
-    const root =
-      securityLevel === 'sandbox'
-        ? select(sandboxElement.nodes()[0].contentDocument.body)
-        : select('body');
-    const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
-
-    const svg = root.select(`[id="${id}"]`);
-    const markers = ['point', 'circle', 'cross'];
-    insertMarkers(svg, markers, diagObj.type, diagObj.arrowMarkerAbsolute);
-    // Fetch the vertices/nodes and edges/links from the parsed graph definition
-    const vert = diagObj.db.getVertices();
-
-    let subG;
-    const subGraphs = diagObj.db.getSubGraphs();
-    log.info('Subgraphs - ', subGraphs);
-    for (let i = subGraphs.length - 1; i >= 0; i--) {
-      subG = subGraphs[i];
-      log.info('Subgraph - ', subG);
-      diagObj.db.addVertex(subG.id, subG.title, 'group', undefined, subG.classes, subG.dir);
-    }
-
-    const parentLookUpDb = addSubGraphs(diagObj.db);
-    graph = addVertices(vert, id, root, doc, diagObj, parentLookUpDb, graph);
-    const edgesEl = svg.insert('g').attr('class', 'edges edgePath');
-    const edges = diagObj.db.getEdges();
-    graph = addEdges(edges, diagObj, graph);
-
-    const cy = cytoscape(graph);
-
-    // c.style();
-    // Make cytoscape care about the dimensions of the nodes
-    cy.nodes().forEach(function (n) {
-      const boundingBox = n.data().boundingBox;
-      if (boundingBox) {
-        n.style('width', boundingBox.width);
-        n.style('height', boundingBox.height);
-      }
-      n.style('shape', 'rectangle');
-      // n.layoutDimensions = () => {
-      //   // console.log('Node dimensions', boundingBox.width, boundingBox.height);
-      //   if (boundingBox) {
-      //     return { w: boundingBox.width, h: boundingBox.height };
-      //   }
-      //   // return { w: boundingBox.width, h: boundingBox.height };
-
-      //   // const data = n.data();
-      //   // return { w: data.width, h: data.height };
-
-      //   return { w: 206, h: 160 };
-      // };
-    });
-
-    cy.layout({
-      // name: 'dagre',
-      // name: 'preset',
-      // name: 'cose',
-      // name: 'circle',
-      name: 'concentric',
-      headless: false,
-      styleEnabled: true,
-      animate: false,
-    }).run();
-
-    // function runLayouts(fit, callBack) {
-    //   // step-1 position child nodes
-    //   var parentNodes = cy.nodes(':parent');
-    //   var grid_layout = parentNodes.descendants().layout({
-    //     name: 'grid',
-    //     cols: 1,
-    //     fit: fit,
-    //   });
-    //   grid_layout.promiseOn('layoutstop').then(function (event) {
-    //     // step-2 position parent nodes
-    //     var dagre_layout = parentNodes.layout({
-    //       name: 'dagre',
-    //       rankDir: 'TB',
-    //       fit: fit,
-    //     });
-    //     dagre_layout.promiseOn('layoutstop').then(function (event) {
-    //       if (callBack) {
-    //         callBack.call(cy, event);
-    //       }
-    //     });
-    //     dagre_layout.run();
-    //   });
-    //   grid_layout.run();
-    // }
-    // runLayouts();
-
-    // log.info('Positions', cy.nodes().positions());
-    // window.cy = cy;
-    cy.ready((e) => {
-      log.info('Ready', e, cy.data());
-      //   // setTimeout(() => {
-      cy.nodes().map((node, id) => {
-        const data = node.data();
-
-        log.info(
-          'Position: (',
-          node.position().x,
-          ', ',
-          node.position().y,
-          ')',
-          data,
-          cy.elements()[0].renderedBoundingBox()
-        );
-        if (data.el) {
-          data.el.attr('transform', `translate(${node.position().x}, ${node.position().y})`);
-          // document
-          //   .querySelector(`[id="${data.domId}"]`)
-          //   .setAttribute('transform', `translate(${node.position().x}, ${node.position().y})`);
-          log.info('Id = ', data.domId, svg.select(`[id="${data.domId}"]`), data.el.node());
-        }
-        // else {
-        //   // console.log('No element found for node', data, node.position(), node.size());
-        // }
-      });
-
-      cy.edges().map((edge, id) => {
-        const data = edge.data();
-        if (edge[0]._private.bodyBounds) {
-          const bounds = edge[0]._private.rscratch;
-          // insertEdge(edgesEl, edge, data.edgeData, bounds, diagObj);
-        }
-      });
-
-      log.info(cy.json());
-      setupGraphViewbox({}, svg, conf.diagramPadding, conf.useMaxWidth);
-      // Remove element after layout
-      // renderEl.remove();
-      resolve();
-      // }, 500);
-    });
-  });
-};
-
-export default {
-  // setConf,
-  // addVertices,
-  // addEdges,
-  getClasses,
-  draw,
-};
diff --git a/packages/mermaid-flowchart-v3/src/mermaidUtils.ts b/packages/mermaid-flowchart-v3/src/mermaidUtils.ts
deleted file mode 100644
index b575c201b1..0000000000
--- a/packages/mermaid-flowchart-v3/src/mermaidUtils.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-const warning = (s: string) => {
-  // Todo remove debug code
-  // eslint-disable-next-line no-console
-  console.error('Log function was called before initialization', s);
-};
-
-export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
-
-export const LEVELS: Record<LogLevel, number> = {
-  trace: 0,
-  debug: 1,
-  info: 2,
-  warn: 3,
-  error: 4,
-  fatal: 5,
-};
-
-export const log: Record<keyof typeof LEVELS, typeof console.log> = {
-  trace: warning,
-  debug: warning,
-  info: warning,
-  warn: warning,
-  error: warning,
-  fatal: warning,
-};
-
-export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
-export let getConfig: () => object;
-export let sanitizeText: (str: string) => string;
-// eslint-disable @typescript-eslint/no-explicit-any
-export let setupGraphViewbox: (
-  graph: any,
-  svgElem: any,
-  padding: any,
-  useMaxWidth: boolean
-) => void;
-
-export const injectUtils = (
-  _log: Record<keyof typeof LEVELS, typeof console.log>,
-  _setLogLevel: any,
-  _getConfig: any,
-  _sanitizeText: any,
-  _setupGraphViewbox: any
-) => {
-  _log.info('Mermaid utils injected');
-  log.trace = _log.trace;
-  log.debug = _log.debug;
-  log.info = _log.info;
-  log.warn = _log.warn;
-  log.error = _log.error;
-  log.fatal = _log.fatal;
-  setLogLevel = _setLogLevel;
-  getConfig = _getConfig;
-  sanitizeText = _sanitizeText;
-  setupGraphViewbox = _setupGraphViewbox;
-};
diff --git a/packages/mermaid-flowchart-v3/src/render-utils.spec.js b/packages/mermaid-flowchart-v3/src/render-utils.spec.js
deleted file mode 100644
index 62bd682d2e..0000000000
--- a/packages/mermaid-flowchart-v3/src/render-utils.spec.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { findCommonAncestor } from './render-utils';
-describe('when rendering a flowchart using elk ', function () {
-  let lookupDb;
-  beforeEach(function () {
-    lookupDb = JSON.parse(
-      '{"parentById":{"B4":"inner","B5":"inner","C4":"inner2","C5":"inner2","B2":"Ugge","B3":"Ugge","inner":"Ugge","inner2":"Ugge","B6":"outer"},"childrenById":{"inner":["B4","B5"],"inner2":["C4","C5"],"Ugge":["B2","B3","inner","inner2"],"outer":["B6"]}}'
-    );
-  });
-  it('Sieblings in a subgraph', function () {
-    expect(findCommonAncestor('B4', 'B5', lookupDb)).toBe('inner');
-  });
-  it('Find an uncle', function () {
-    expect(findCommonAncestor('B4', 'B2', lookupDb)).toBe('Ugge');
-  });
-  it('Find a cousin', function () {
-    expect(findCommonAncestor('B4', 'C4', lookupDb)).toBe('Ugge');
-  });
-  it('Find a grandparent', function () {
-    expect(findCommonAncestor('B4', 'B6', lookupDb)).toBe('root');
-  });
-  it('Sieblings in the root', function () {
-    expect(findCommonAncestor('B1', 'outer', lookupDb)).toBe('root');
-  });
-});
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index e00e861d2c..c5699ae281 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -56,6 +56,7 @@
     "d3": "^7.0.0",
     "dagre-d3-es": "7.0.6",
     "dompurify": "2.4.3",
+    "elkjs": "^0.8.2",
     "khroma": "^2.0.0",
     "lodash-es": "^4.17.21",
     "moment-mini": "^2.24.0",
diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts
index 2ff0b55321..92291e282c 100644
--- a/packages/mermaid/src/diagram-api/detectType.ts
+++ b/packages/mermaid/src/diagram-api/detectType.ts
@@ -1,6 +1,11 @@
 import { MermaidConfig } from '../config.type';
 import { log } from '../logger';
-import { DetectorRecord, DiagramDetector, DiagramLoader } from './types';
+import type {
+  DetectorRecord,
+  DiagramDetector,
+  DiagramLoader,
+  ExternalDiagramDefinition,
+} from './types';
 import { frontMatterRegex } from './frontmatter';
 
 const directive = /%{2}{\s*(?:(\w+)\s*:|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
@@ -42,6 +47,12 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
   throw new Error(`No diagram type detected for text: ${text}`);
 };
 
+export const registerLazyLoadedDiagrams = (...diagrams: ExternalDiagramDefinition[]) => {
+  for (const { id, detector, loader } of diagrams) {
+    addDetector(id, detector, loader);
+  }
+};
+
 export const addDetector = (key: string, detector: DiagramDetector, loader?: DiagramLoader) => {
   if (detectors[key]) {
     throw new Error(`Detector with key ${key} already exists`);
diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 6c7ab69074..ce54f6f18f 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -94,6 +94,9 @@ import { setConfig } from '../config';
 import errorRenderer from '../diagrams/error/errorRenderer';
 import errorStyles from '../diagrams/error/styles';
 
+import flowchartElk from '../diagrams/flowchart/elk/detector';
+import { registerLazyLoadedDiagrams } from './detectType';
+
 let hasLoadedDiagrams = false;
 export const addDiagrams = () => {
   if (hasLoadedDiagrams) {
@@ -102,6 +105,8 @@ export const addDiagrams = () => {
   // This is added here to avoid race-conditions.
   // We could optimize the loading logic somehow.
   hasLoadedDiagrams = true;
+  registerLazyLoadedDiagrams(flowchartElk);
+
   registerDiagram(
     'error',
     // Special diagram with error messages but setup as a regular diagram
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/detector.spec.ts b/packages/mermaid/src/diagrams/flowchart/elk/detector.spec.ts
new file mode 100644
index 0000000000..17cd5c0eae
--- /dev/null
+++ b/packages/mermaid/src/diagrams/flowchart/elk/detector.spec.ts
@@ -0,0 +1,55 @@
+import plugin from './detector';
+import { describe, it } from 'vitest';
+
+const { detector } = plugin;
+
+describe('flowchart-elk detector', () => {
+  it('should fail for dagre-d3', () => {
+    expect(
+      detector('flowchart', {
+        flowchart: {
+          defaultRenderer: 'dagre-d3',
+        },
+      })
+    ).toBe(false);
+  });
+  it('should fail for dagre-wrapper', () => {
+    expect(
+      detector('flowchart', {
+        flowchart: {
+          defaultRenderer: 'dagre-wrapper',
+        },
+      })
+    ).toBe(false);
+  });
+  it('should succeed for elk', () => {
+    expect(
+      detector('flowchart', {
+        flowchart: {
+          defaultRenderer: 'elk',
+        },
+      })
+    ).toBe(true);
+    expect(
+      detector('graph', {
+        flowchart: {
+          defaultRenderer: 'elk',
+        },
+      })
+    ).toBe(true);
+  });
+
+  it('should detect flowchart-elk', () => {
+    expect(detector('flowchart-elk')).toBe(true);
+  });
+
+  it('should not detect class with defaultRenderer set to elk', () => {
+    expect(
+      detector('class', {
+        flowchart: {
+          defaultRenderer: 'elk',
+        },
+      })
+    ).toBe(false);
+  });
+});
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/detector.ts b/packages/mermaid/src/diagrams/flowchart/elk/detector.ts
new file mode 100644
index 0000000000..1d825e35c4
--- /dev/null
+++ b/packages/mermaid/src/diagrams/flowchart/elk/detector.ts
@@ -0,0 +1,29 @@
+import type { MermaidConfig } from '../../../config.type';
+import type { ExternalDiagramDefinition, DiagramDetector } from '../../../diagram-api/types';
+
+const id = 'flowchart-elk';
+
+const detector: DiagramDetector = (txt: string, config?: MermaidConfig): boolean => {
+  if (
+    // If diagram explicitly states flowchart-elk
+    txt.match(/^\s*flowchart-elk/) ||
+    // If a flowchart/graph diagram has their default renderer set to elk
+    (txt.match(/^\s*flowchart|graph/) && config?.flowchart?.defaultRenderer === 'elk')
+  ) {
+    return true;
+  }
+  return false;
+};
+
+const loader = async () => {
+  const { diagram } = await import('./diagram-definition');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/diagram-definition.ts b/packages/mermaid/src/diagrams/flowchart/elk/diagram-definition.ts
new file mode 100644
index 0000000000..c45873238d
--- /dev/null
+++ b/packages/mermaid/src/diagrams/flowchart/elk/diagram-definition.ts
@@ -0,0 +1,13 @@
+// @ts-ignore: JISON typing missing
+import parser from '../parser/flow';
+
+import * as db from '../flowDb';
+import renderer from './flowRenderer-elk';
+import styles from './styles';
+
+export const diagram = {
+  db,
+  renderer,
+  parser,
+  styles,
+};
diff --git a/packages/mermaid-flowchart-v3/src/flowRenderer-v3.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
similarity index 93%
rename from packages/mermaid-flowchart-v3/src/flowRenderer-v3.js
rename to packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
index 677d977240..36783dbb22 100644
--- a/packages/mermaid-flowchart-v3/src/flowRenderer-v3.js
+++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
@@ -1,21 +1,15 @@
-import graphlib from 'graphlib';
-import { select, line, curveLinear, curveCardinal, curveBasis, selectAll } from 'd3';
-import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
-import { insertNode } from '../../mermaid/src/dagre-wrapper/nodes.js';
-import insertMarkers from '../../mermaid/src/dagre-wrapper/markers.js';
-import createLabel from '../../mermaid/src/dagre-wrapper/createLabel';
-import { insertEdgeLabel, positionEdgeLabel } from '../../mermaid/src/dagre-wrapper/edges.js';
+import { select, line, curveLinear } from 'd3';
+import { insertNode } from '../../../dagre-wrapper/nodes.js';
+import insertMarkers from '../../../dagre-wrapper/markers.js';
+import { insertEdgeLabel } from '../../../dagre-wrapper/edges.js';
 import { findCommonAncestor } from './render-utils';
-// Replace with other function to avoid dependency to dagre-d3
 import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
+import { getConfig } from '../../../config';
+import { log } from '../../../logger';
+import { setupGraphViewbox } from '../../../setupGraphViewbox';
+import common, { evaluate } from '../../common/common';
+import { interpolateToCurve, getStylesFromArray } from '../../../utils';
 
-import common, { evaluate } from '../../mermaid/src/diagrams/common/common';
-import { interpolateToCurve, getStylesFromArray } from '../../mermaid/src/utils';
-
-// import ELK from 'elkjs/lib/elk-api';
-// const elk = new ELK({
-//   workerUrl: './elk-worker.min.js',
-// });
 import ELK from 'elkjs/lib/elk.bundled.js';
 const elk = new ELK();
 
@@ -195,8 +189,8 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
       labelText: vertexText,
       labelData,
       // labels: [{ text: vertexText }],
-      // rx: radious,
-      // ry: radious,
+      // rx: radius,
+      // ry: radius,
       // class: classStr,
       // style: styles.style,
       // link: vertex.link,
@@ -224,8 +218,8 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
     //   labelStyle: styles.labelStyle,
     //   shape: _shape,
     //   labelText: vertexText,
-    //   rx: radious,
-    //   ry: radious,
+    //   rx: radius,
+    //   ry: radius,
     //   class: classStr,
     //   style: styles.style,
     //   id: vertex.id,
@@ -254,7 +248,6 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
 export const addEdges = function (edges, diagObj, graph, svg) {
   // log.info('abc78 edges = ', edges);
   const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
-  let cnt = 0;
   let linkIdCnt = {};
 
   let defaultStyle;
@@ -267,8 +260,6 @@ export const addEdges = function (edges, diagObj, graph, svg) {
   }
 
   edges.forEach(function (edge) {
-    cnt++;
-
     // Identify Link
     var linkIdBase = 'L-' + edge.start + '-' + edge.end;
     // count the links from+to the same node to give unique id
@@ -382,7 +373,6 @@ export const addEdges = function (edges, diagObj, graph, svg) {
     edgeData.id = linkId;
     edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;
 
-    const edgesNode = select(edges);
     const labelEl = insertEdgeLabel(labelsEl, edgeData);
     // console.log('labelEl', labelEl, edgeData.width);
     // Add the edge to the graph
@@ -515,7 +505,7 @@ export const getClasses = function (text, diagObj) {
     diagObj.parse(text);
     return diagObj.db.getClasses();
   } catch (e) {
-    return;
+    return {};
   }
 };
 
@@ -542,45 +532,17 @@ const addSubGraphs = function (db) {
   return parentLookupDb;
 };
 
-/* Reverse engineered with trial and error */
-const calcOffsetOld = function (src, dest, sourceId, targetId, srcDepth, targetDepth, so, to) {
-  // if (src === dest) {
-  //   return src;
-  // }
-  // if (sourceId === 'B6') {
-  //   return 0;
-  // }
-  // if (sourceId === 'B4') {
-  //   return 318;
-  // }
-  if (srcDepth < targetDepth) {
-    return src;
-  }
-  if (srcDepth > targetDepth) {
-    return dest;
-  }
-  if (srcDepth === targetDepth) {
-    return src;
-  }
-  // if (src < dest) {
-  //   return dest + src;
-  // }
-  return 0;
-};
-
 const calcOffset = function (src, dest, parentLookupDb) {
   const ancestor = findCommonAncestor(src, dest, parentLookupDb);
   if (ancestor === undefined || ancestor === 'root') {
     return { x: 0, y: 0 };
   }
 
-  const ancestoprOffset = nodeDb[ancestor].offset;
-  return { x: ancestoprOffset.posX, y: ancestoprOffset.posY };
+  const ancestorOffset = nodeDb[ancestor].offset;
+  return { x: ancestorOffset.posX, y: ancestorOffset.posY };
 };
 
 const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb) {
-  const srcOffset = nodeDb[edge.sources[0]].offset;
-  const targetOffset = nodeDb[edge.targets[0]].offset;
   const offset = calcOffset(edge.sources[0], edge.targets[0], parentLookupDb);
 
   const src = edge.sections[0].startPoint;
@@ -846,9 +808,6 @@ const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, diagObj, depth) => {
 };
 
 export default {
-  // setConf,
-  // addVertices,
-  // addEdges,
   getClasses,
   draw,
 };
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/render-utils.spec.ts b/packages/mermaid/src/diagrams/flowchart/elk/render-utils.spec.ts
new file mode 100644
index 0000000000..d845fa6974
--- /dev/null
+++ b/packages/mermaid/src/diagrams/flowchart/elk/render-utils.spec.ts
@@ -0,0 +1,40 @@
+import { findCommonAncestor, TreeData } from './render-utils';
+describe('when rendering a flowchart using elk ', () => {
+  let lookupDb: TreeData;
+  beforeEach(() => {
+    lookupDb = {
+      parentById: {
+        B4: 'inner',
+        B5: 'inner',
+        C4: 'inner2',
+        C5: 'inner2',
+        B2: 'Ugge',
+        B3: 'Ugge',
+        inner: 'Ugge',
+        inner2: 'Ugge',
+        B6: 'outer',
+      },
+      childrenById: {
+        inner: ['B4', 'B5'],
+        inner2: ['C4', 'C5'],
+        Ugge: ['B2', 'B3', 'inner', 'inner2'],
+        outer: ['B6'],
+      },
+    };
+  });
+  it('to find parent of siblings in a subgraph', () => {
+    expect(findCommonAncestor('B4', 'B5', lookupDb)).toBe('inner');
+  });
+  it('to find an uncle', () => {
+    expect(findCommonAncestor('B4', 'B2', lookupDb)).toBe('Ugge');
+  });
+  it('to find a cousin', () => {
+    expect(findCommonAncestor('B4', 'C4', lookupDb)).toBe('Ugge');
+  });
+  it('to find a grandparent', () => {
+    expect(findCommonAncestor('B4', 'B6', lookupDb)).toBe('root');
+  });
+  it('to find ancestor of siblings in the root', () => {
+    expect(findCommonAncestor('B1', 'outer', lookupDb)).toBe('root');
+  });
+});
diff --git a/packages/mermaid-flowchart-v3/src/render-utils.js b/packages/mermaid/src/diagrams/flowchart/elk/render-utils.ts
similarity index 67%
rename from packages/mermaid-flowchart-v3/src/render-utils.js
rename to packages/mermaid/src/diagrams/flowchart/elk/render-utils.ts
index f838e174d5..ebdc01cf76 100644
--- a/packages/mermaid-flowchart-v3/src/render-utils.js
+++ b/packages/mermaid/src/diagrams/flowchart/elk/render-utils.ts
@@ -1,4 +1,9 @@
-export const findCommonAncestor = (id1, id2, treeData) => {
+export interface TreeData {
+  parentById: Record<string, string>;
+  childrenById: Record<string, string[]>;
+}
+
+export const findCommonAncestor = (id1: string, id2: string, treeData: TreeData) => {
   const { parentById } = treeData;
   const visited = new Set();
   let currentId = id1;
diff --git a/packages/mermaid-flowchart-v3/src/styles.ts b/packages/mermaid/src/diagrams/flowchart/elk/styles.ts
similarity index 96%
rename from packages/mermaid-flowchart-v3/src/styles.ts
rename to packages/mermaid/src/diagrams/flowchart/elk/styles.ts
index 1f76ff435a..e8e7065a0e 100644
--- a/packages/mermaid-flowchart-v3/src/styles.ts
+++ b/packages/mermaid/src/diagrams/flowchart/elk/styles.ts
@@ -13,9 +13,10 @@ export interface FlowChartStyleOptions {
   tertiaryColor: string;
   textColor: string;
   titleColor: string;
+  [key: string]: string;
 }
 
-const genSections = (options) => {
+const genSections = (options: FlowChartStyleOptions) => {
   let sections = '';
 
   for (let i = 0; i < 5; i++) {
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index fae7c6cf26..05473b4a0f 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -82,6 +82,7 @@ that id.
 <click>[\s\n]           this.popState();
 <click>[^\s\n]*         return 'CLICK';
 
+"flowchart-elk"        {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
 "graph"                {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
 "flowchart"            {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
 "subgraph"            return 'subgraph';
diff --git a/packages/mermaid/src/docs.spec.ts b/packages/mermaid/src/docs.spec.ts
index 2d27a6b238..ea5f54d692 100644
--- a/packages/mermaid/src/docs.spec.ts
+++ b/packages/mermaid/src/docs.spec.ts
@@ -1,6 +1,6 @@
 import { transformBlocks, transformToBlockQuote } from './docs.mjs';
-
 import { remark as remarkBuilder } from 'remark'; // import it this way so we can mock it
+import { vi, afterEach, describe, it, expect } from 'vitest';
 
 const remark = remarkBuilder();
 
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index 75ee75bb68..3c09d2c922 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -8,7 +8,7 @@ import { MermaidConfig } from './config.type';
 import { log } from './logger';
 import utils from './utils';
 import { mermaidAPI } from './mermaidAPI';
-import { addDetector } from './diagram-api/detectType';
+import { registerLazyLoadedDiagrams } from './diagram-api/detectType';
 import type { ParseErrorFunction } from './Diagram';
 import { isDetailedError } from './utils';
 import type { DetailedError } from './utils';
@@ -189,18 +189,7 @@ const initThrowsErrors = function (
  * @internal
  * @param diagrams - Array of {@link ExternalDiagramDefinition}.
  */
-const registerLazyLoadedDiagrams = (diagrams: ExternalDiagramDefinition[]) => {
-  for (const { id, detector, loader } of diagrams) {
-    addDetector(id, detector, loader);
-  }
-};
-
-/**
- * This is an internal function and should not be made public, as it will likely change.
- * @internal
- * @param diagrams - Array of {@link ExternalDiagramDefinition}.
- */
-const loadExternalDiagrams = async (diagrams: ExternalDiagramDefinition[]) => {
+const loadExternalDiagrams = async (...diagrams: ExternalDiagramDefinition[]) => {
   log.debug(`Loading ${diagrams.length} external diagrams`);
   // Load all lazy loaded diagrams in parallel
   const results = await Promise.allSettled(
@@ -343,9 +332,9 @@ const registerExternalDiagrams = async (
   } = {}
 ) => {
   if (lazyLoad) {
-    registerLazyLoadedDiagrams(diagrams);
+    registerLazyLoadedDiagrams(...diagrams);
   } else {
-    await loadExternalDiagrams(diagrams);
+    await loadExternalDiagrams(...diagrams);
   }
   externalDiagramsRegistered = true;
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 050209f43f..dfc7885973 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -178,6 +178,9 @@ importers:
       dompurify:
         specifier: 2.4.3
         version: 2.4.3
+      elkjs:
+        specifier: ^0.8.2
+        version: 0.8.2
       khroma:
         specifier: ^2.0.0
         version: 2.0.0
@@ -309,40 +312,6 @@ importers:
         specifier: ^3.0.2
         version: 3.0.2
 
-  packages/mermaid-flowchart-v3:
-    dependencies:
-      '@braintree/sanitize-url':
-        specifier: ^6.0.0
-        version: 6.0.0
-      d3:
-        specifier: ^7.0.0
-        version: 7.6.1
-      dagre-d3-es:
-        specifier: 7.0.6
-        version: 7.0.6
-      elkjs:
-        specifier: ^0.8.2
-        version: 0.8.2
-      graphlib:
-        specifier: ^2.1.0
-        version: 2.1.8
-      khroma:
-        specifier: ^2.0.0
-        version: 2.0.0
-      non-layered-tidy-tree-layout:
-        specifier: ^2.0.2
-        version: 2.0.2
-    devDependencies:
-      concurrently:
-        specifier: ^7.5.0
-        version: 7.5.0
-      mermaid:
-        specifier: workspace:*
-        version: link:../mermaid
-      rimraf:
-        specifier: ^3.0.2
-        version: 3.0.2
-
   packages/mermaid-mindmap:
     dependencies:
       '@braintree/sanitize-url':
@@ -7140,12 +7109,6 @@ packages:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
     dev: true
 
-  /graphlib/2.1.8:
-    resolution: {integrity: sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==}
-    dependencies:
-      lodash: 4.17.21
-    dev: false
-
   /handle-thing/2.0.1:
     resolution: {integrity: sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==}
     dev: true