fix: Detector order

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

@@ -0,0 +1,42 @@
+import { it, describe, expect } from 'vitest';
+import { detectType } from './detectType';
+import { addDiagrams } from './diagram-orchestration';
+
+describe('diagram-orchestration', () => {
+  it('should register diagrams', () => {
+    expect(() => detectType('graph TD; A-->B')).toThrow();
+    addDiagrams();
+    expect(detectType('graph TD; A-->B')).toBe('flowchart');
+  });
+
+  describe('proper diagram types should be detetced', () => {
+    beforeAll(() => {
+      addDiagrams();
+    });
+
+    it.each([
+      { text: 'graph TD;', expected: 'flowchart' },
+      { text: 'flowchart TD;', expected: 'flowchart-v2' },
+      { text: 'flowchart-v2 TD;', expected: 'flowchart-v2' },
+      { text: 'flowchart-elk TD;', expected: 'flowchart-elk' },
+      { text: 'error', expected: 'error' },
+      { text: 'C4Context;', expected: 'c4' },
+      { text: 'classDiagram', expected: 'class' },
+      { text: 'classDiagram-v2', expected: 'classDiagram' },
+      { text: 'erDiagram', expected: 'er' },
+      { text: 'journey', expected: 'journey' },
+      { text: 'gantt', expected: 'gantt' },
+      { text: 'pie', expected: 'pie' },
+      { text: 'requirementDiagram', expected: 'requirement' },
+      { text: 'info', expected: 'info' },
+      { text: 'sequenceDiagram', expected: 'sequence' },
+      { text: 'mindmap', expected: 'mindmap' },
+      { text: 'timeline', expected: 'timeline' },
+      { text: 'gitGraph', expected: 'gitGraph' },
+      { text: 'stateDiagram', expected: 'state' },
+      { text: 'stateDiagram-v2', expected: 'stateDiagram' },
+    ])('should $text be detected as $expected', ({ text, expected }) => {
+      expect(detectType(text)).toBe(expected);
+    });
+  });
+});

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

@@ -45,7 +45,7 @@ export const addDiagrams = () => {
           throw new Error(
             'Diagrams beginning with --- are not valid. ' +
               'If you were trying to use a YAML front-matter, please ensure that ' +
-              "you've correctly opened and closed the YAML front-matter with unindented `---` blocks"
+              "you've correctly opened and closed the YAML front-matter with un-indented `---` blocks"
           );
         },
       },
@@ -55,25 +55,28 @@ export const addDiagrams = () => {
       return text.toLowerCase().trimStart().startsWith('---');
     }
   );
+  // Ordering of detectors is important. The first one to return true will be used.
   registerLazyLoadedDiagrams(
     error,
     c4,
-    classDiagram,
     classDiagramV2,
+    classDiagram,
     er,
     gantt,
     info,
     pie,
     requirement,
     sequence,
+    flowchartElk,
+    // TODO @knsv: Should v2 come before flowchart?
+    // This will fail few unit tests as they expect graph to be detected as flowchart, but it is detected as flowchart-v2.
     flowchart,
     flowchartV2,
-    flowchartElk,
     mindmap,
     timeline,
     git,
-    state,
     stateV2,
+    state,
     journey
   );
 };

packages/mermaid/src/mermaidAPI.spec.ts

@@ -666,7 +666,7 @@ describe('mermaidAPI', () => {
       ).rejects.toThrow(
         'Diagrams beginning with --- are not valid. ' +
           'If you were trying to use a YAML front-matter, please ensure that ' +
-          "you've correctly opened and closed the YAML front-matter with unindented `---` blocks"
+          "you've correctly opened and closed the YAML front-matter with un-indented `---` blocks"
       );
     });
     it('does not throw for a valid definition', async () => {