fix: clean comments in text in getDiagramFromText API so flowchart works well

demos/flowchart.html

@@ -1539,7 +1539,11 @@ <h3>flowchart</h3>
       class I bugged_node
     </pre>
     <hr />
-
+    <pre class="mermaid">
+      flowchart LR
+  %% this is a comment A -- text --> B{node}
+  A -- text --> B -- text2 --> C
+    </pre>
     <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
 
     <script type="module">

packages/mermaid/src/Diagram.ts

@@ -8,6 +8,8 @@ import { encodeEntities } from './utils.js';
 import type { DetailedError } from './utils.js';
 import type { DiagramDefinition, DiagramMetadata } from './diagram-api/types.js';
 
+import { cleanupComments } from './diagram-api/comments.js';
+
 export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
 
 /**
@@ -23,7 +25,7 @@ export class Diagram {
 
   private detectError?: UnknownDiagramError;
   constructor(public text: string, public metadata: Pick<DiagramMetadata, 'title'> = {}) {
-    this.text = encodeEntities(text);
+    this.text = encodeEntities(cleanupComments(text));
     this.text += '\n';
     const cnf = configApi.getConfig();
     try {

packages/mermaid/src/diagram.spec.ts

@@ -83,4 +83,14 @@ Expecting 'TXT', got 'NEWLINE'"
     expect(messages[0].message).toBe('I fl°°9829¶ß you!');
     expect(messages[1].message).toBe('I fl°°9829¶ß you fl°infin¶ß times more!');
   });
+
+  test('should clean up comments when present in diagram defination', async () => {
+    const diagram = await getDiagramFromText(
+      `flowchart LR
+    %% this is a comment A -- text --> B{node}
+    A -- text --> B -- text2 --> C`
+    );
+    expect(diagram).toBeInstanceOf(Diagram);
+    expect(diagram.type).toBe('flowchart-v2');
+  });
 });