diff --git a/demos/flowchart.html b/demos/flowchart.html
index d7032a663c..e6fdb6d2b7 100644
--- a/demos/flowchart.html
+++ b/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">
diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 2b5ae89923..391df6ff9a 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/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 {
@@ -85,6 +87,8 @@ export const getDiagramFromText = async (
   metadata: Pick<DiagramMetadata, 'title'> = {}
 ): Promise<Diagram> => {
   const type = detectType(text, configApi.getConfig());
+  let title;
+
   try {
     // Trying to find the diagram
     getDiagram(type);