feat: improve mermaid detection on paste (#8287)

packages/excalidraw/mermaid.test.ts

@@ -0,0 +1,15 @@
+import { isMaybeMermaidDefinition } from "./mermaid";
+
+describe("isMaybeMermaidDefinition", () => {
+  it("should return true for a valid mermaid definition", () => {
+    expect(isMaybeMermaidDefinition("flowchart")).toBe(true);
+    expect(isMaybeMermaidDefinition("flowchart LR")).toBe(true);
+    expect(isMaybeMermaidDefinition("flowchart LR\nola")).toBe(true);
+    expect(isMaybeMermaidDefinition("%%{}%%flowchart")).toBe(true);
+    expect(isMaybeMermaidDefinition("%%{}%% flowchart")).toBe(true);
+
+    expect(isMaybeMermaidDefinition("graphs")).toBe(false);
+    expect(isMaybeMermaidDefinition("this flowchart")).toBe(false);
+    expect(isMaybeMermaidDefinition("this\nflowchart")).toBe(false);
+  });
+});

packages/excalidraw/mermaid.ts

@@ -2,6 +2,7 @@
 export const isMaybeMermaidDefinition = (text: string) => {
   const chartTypes = [
     "flowchart",
+    "graph",
     "sequenceDiagram",
     "classDiagram",
     "stateDiagram",
@@ -23,9 +24,9 @@ export const isMaybeMermaidDefinition = (text: string) => {
   ];
 
   const re = new RegExp(
-    `^(?:%%{.*?}%%[\\s\\n]*)?\\b${chartTypes
-      .map((x) => `${x}(-beta)?`)
-      .join("|")}\\b`,
+    `^(?:%%{.*?}%%[\\s\\n]*)?\\b(?:${chartTypes
+      .map((x) => `\\s*${x}(-beta)?`)
+      .join("|")})\\b`,
   );
 
   return re.test(text.trim());