diff --git a/cypress/e2e/docMap.spec.ts b/cypress/e2e/docMap.spec.ts
index 5c7e8201d..d1a0c9895 100755
--- a/cypress/e2e/docMap.spec.ts
+++ b/cypress/e2e/docMap.spec.ts
@@ -14,23 +14,23 @@ describe('Editor docs tests', () => {
 
   it('Test to see if the correct URL loads when changing from one diagram to other', () => {
     cy.contains('Flow').click();
-    cy.get(`[data-cy=docs][href$="/#/flowchart"]`).should('exist');
+    cy.get(`[data-cy=docs][href$="/syntax/flowchart"]`).should('exist');
 
     cy.contains('Config').click();
-    cy.get(`[data-cy=docs][href$="/#/flowchart?id=configuration"]`).should('exist');
+    cy.get(`[data-cy=docs][href$="/syntax/flowchart?id=configuration"]`).should('exist');
 
     cy.contains('Sequence').click();
-    cy.get(`[data-cy=docs][href$="/#/sequenceDiagram?id=configuration"]`).should('exist');
+    cy.get(`[data-cy=docs][href$="/syntax/sequenceDiagram?id=configuration"]`).should('exist');
 
     cy.contains('Code').click();
-    cy.get(`[data-cy=docs][href$="/#/sequenceDiagram"]`).should('exist');
+    cy.get(`[data-cy=docs][href$="/syntax/sequenceDiagram"]`).should('exist');
   });
 
   it("Test to check URLs for a case where config URL doesn't exist", () => {
     cy.contains('State').click();
-    cy.get(`[data-cy=docs][href$="/#/stateDiagram"]`).should('exist');
+    cy.get(`[data-cy=docs][href$="/syntax/stateDiagram"]`).should('exist');
 
     cy.contains('Config').click();
-    cy.get(`[data-cy=docs][href$="/#/stateDiagram"]`).should('exist');
+    cy.get(`[data-cy=docs][href$="/syntax/stateDiagram"]`).should('exist');
   });
 });
diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte
index 1458e6d24..ebce9120a 100644
--- a/src/routes/edit/+page.svelte
+++ b/src/routes/edit/+page.svelte
@@ -16,42 +16,49 @@
   const MCBaseURL = dev ? 'http://localhost:5174' : 'https://mermaidchart.com';
   const docURLBase = 'https://mermaid-js.github.io/mermaid';
   const docMap: DocumentationConfig = {
-    graph: {
-      code: '/#/flowchart',
-      config: '/#/flowchart?id=configuration'
+    classDiagram: {
+      code: '/syntax/classDiagram',
+      config: '/syntax/classDiagram#configuration'
+    },
+    erDiagram: {
+      code: '/syntax/entityRelationshipDiagram'
     },
     flowchart: {
-      code: '/#/flowchart',
-      config: '/#/flowchart?id=configuration'
+      code: '/syntax/flowchart',
+      config: '/syntax/flowchart#configuration'
     },
-    sequenceDiagram: {
-      code: '/#/sequenceDiagram',
-      config: '/#/sequenceDiagram?id=configuration'
+    gantt: {
+      code: '/syntax/gantt',
+      config: '/syntax/gantt#configuration'
     },
-    classDiagram: {
-      code: '/#/classDiagram',
-      config: '/#/classDiagram?id=configuration'
+    gitGraph: {
+      code: '/syntax/gitgraph',
+      config: '/syntax/gitgraph#gitgraph-specific-configuration-options'
     },
-    'stateDiagram-v2': {
-      code: '/#/stateDiagram'
+    graph: {
+      code: '/syntax/flowchart',
+      config: '/syntax/flowchart#configuration'
     },
-    gantt: {
-      code: '/#/gantt',
-      config: '/#/gantt?id=configuration'
+    journey: {
+      code: '/syntax/userJourney'
+    },
+    mindmap: {
+      code: '/syntax/mindmap'
     },
     pie: {
-      code: '/#/pie'
+      code: '/syntax/pie',
+      config: '/syntax/pie#configuration'
     },
-    erDiagram: {
-      code: '/#/entityRelationshipDiagram',
-      config: '/#/entityRelationshipDiagram?id=styling'
+    quadrantChart: {
+      code: '/syntax/quadrantChart',
+      config: '/syntax/quadrantChart#chart-configurations'
     },
-    journey: {
-      code: '/#/user-journey'
+    sequenceDiagram: {
+      code: '/syntax/sequenceDiagram',
+      config: '/syntax/sequenceDiagram#configuration'
     },
-    gitGraph: {
-      code: '/#/gitgraph',
-      config: '/#/gitgraph?id=gitgraph-specific-configuration-options'
+    'stateDiagram-v2': {
+      code: '/syntax/stateDiagram'
     }
   };
   let docURL = docURLBase;