feat: add state diagram support (#96)

Co-authored-by: Igor Wessel <igor_wessel@hotmail.com>

Author: dwelle

package.json

@@ -34,6 +34,7 @@
     "@excalidraw/excalidraw": "^0.18.0-a9ca16e",
     "@playwright/test": "^1.58.2",
     "@types/mermaid": "^9.2.0",
+    "@types/node": "^20",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.4",
     "@typescript-eslint/eslint-plugin": "5.59.9",

playground/ExcalidrawSvgPreview.tsx

@@ -6,6 +6,7 @@ import {
 import { DEFAULT_FONT_SIZE } from "../src/constants";
 import { graphToExcalidraw } from "../src/graphToExcalidraw";
 import { parseMermaid } from "../src/parseMermaid";
+import { ensureExcalidrawFontsLoaded } from "./loadExcalidrawFonts";
 
 interface ExcalidrawSvgPreviewProps {
   definition: string;
@@ -49,6 +50,7 @@ const generateExcalidrawSvg = async (definition: string): Promise<string> => {
       const { elements, files } = graphToExcalidraw(parsedMermaid, {
         fontSize: DEFAULT_FONT_SIZE,
       });
+      await ensureExcalidrawFontsLoaded();
 
       const svgElement = await exportToSvg({
         elements: convertToExcalidrawElements(elements),

playground/ExcalidrawWrapper.tsx

@@ -7,6 +7,7 @@ import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
 import { graphToExcalidraw } from "../src/graphToExcalidraw";
 import { DEFAULT_FONT_SIZE } from "../src/constants";
 import type { MermaidData } from "./";
+import { ensureExcalidrawFontsLoaded } from "./loadExcalidrawFonts";
 
 interface ExcalidrawWrapperProps {
   mermaidDefinition: MermaidData["definition"];
@@ -25,29 +26,45 @@ const ExcalidrawWrapper = ({
     useState<ExcalidrawImperativeAPI | null>(null);
 
   useEffect(() => {
+    let isCancelled = false;
+
     if (!readyExcalidrawAPI || readyExcalidrawAPI.isDestroyed) {
-      return;
+      return undefined;
     }
 
     if (mermaidDefinition === "" || mermaidOutput === null) {
       readyExcalidrawAPI.resetScene();
-      return;
+      return undefined;
     }
 
-    const { elements, files } = graphToExcalidraw(mermaidOutput, {
-      fontSize: DEFAULT_FONT_SIZE,
-    });
+    void (async () => {
+      await ensureExcalidrawFontsLoaded();
+      if (isCancelled || readyExcalidrawAPI.isDestroyed) {
+        return;
+      }
 
-    readyExcalidrawAPI.updateScene({
-      elements: convertToExcalidrawElements(elements),
-    });
-    readyExcalidrawAPI.scrollToContent(readyExcalidrawAPI.getSceneElements(), {
-      fitToContent: true,
-    });
+      const { elements, files } = graphToExcalidraw(mermaidOutput, {
+        fontSize: DEFAULT_FONT_SIZE,
+      });
 
-    if (files) {
-      readyExcalidrawAPI.addFiles(Object.values(files));
-    }
+      readyExcalidrawAPI.updateScene({
+        elements: convertToExcalidrawElements(elements),
+      });
+      readyExcalidrawAPI.scrollToContent(
+        readyExcalidrawAPI.getSceneElements(),
+        {
+          fitToContent: true,
+        }
+      );
+
+      if (files) {
+        readyExcalidrawAPI.addFiles(Object.values(files));
+      }
+    })();
+
+    return () => {
+      isCancelled = true;
+    };
   }, [mermaidDefinition, mermaidOutput, readyExcalidrawAPI]);
 
   return (

playground/SingleTestCase.tsx

@@ -3,7 +3,7 @@ import { MermaidDiagram } from "./MermaidDiagram";
 import { ExcalidrawSvgPreview } from "./ExcalidrawSvgPreview";
 
 export interface TestCase {
-  type: "class" | "erd" | "flowchart" | "sequence" | "unsupported";
+  type: "class" | "erd" | "flowchart" | "sequence" | "state" | "unsupported";
   name: string;
   definition: string;
 }

playground/Testcases.tsx

@@ -2,6 +2,7 @@ import { FLOWCHART_DIAGRAM_TESTCASES } from "./testcases/flowchart";
 import { SEQUENCE_DIAGRAM_TESTCASES } from "./testcases/sequence.ts";
 import { CLASS_DIAGRAM_TESTCASES } from "./testcases/class.ts";
 import { ERD_DIAGRAM_TESTCASES } from "./testcases/er.ts";
+import { STATE_DIAGRAM_TESTCASES } from "./testcases/state.ts";
 import { UNSUPPORTED_DIAGRAM_TESTCASES } from "./testcases/unsupported.ts";
 
 import SingleTestCase, { TestCase } from "./SingleTestCase.tsx";
@@ -119,6 +120,11 @@ const Testcases = ({ onChange, onInsertMermaidSvg }: TestcasesProps) => {
       documentationHref:
         "https://mermaid.js.org/syntax/entityRelationshipDiagram.html",
     },
+    {
+      name: "State",
+      testcases: STATE_DIAGRAM_TESTCASES,
+      documentationHref: "https://mermaid.js.org/syntax/stateDiagram.html",
+    },
     {
       name: "Unsupported",
       testcases: UNSUPPORTED_DIAGRAM_TESTCASES,

playground/loadExcalidrawFonts.ts

@@ -0,0 +1,100 @@
+import { getFontString } from "@excalidraw/common";
+import { FONT_FAMILY, Fonts } from "@excalidraw/excalidraw";
+
+let excalidrawFontsReadyPromise: Promise<void> | null = null;
+let fontMeasureContext: CanvasRenderingContext2D | null | undefined;
+
+const EXCALIFONT_PROBE_TEXT = "This is the note to the left.";
+const EXCALIFONT_PROBE_SIZE = 18;
+const EXCALIFONT_METRICS_WAIT_TIMEOUT_MS = 2000;
+const EXCALIFONT_METRICS_POLL_INTERVAL_MS = 16;
+
+const getFontMeasureContext = () => {
+  if (fontMeasureContext !== undefined) {
+    return fontMeasureContext;
+  }
+
+  try {
+    fontMeasureContext = document.createElement("canvas").getContext("2d");
+  } catch {
+    fontMeasureContext = null;
+  }
+
+  return fontMeasureContext;
+};
+
+const measureTextWidth = (font: string, text: string) => {
+  const context = getFontMeasureContext();
+  if (!context) {
+    return null;
+  }
+
+  context.font = font;
+  return context.measureText(text).width;
+};
+
+const wait = (ms: number) =>
+  new Promise<void>((resolve) => {
+    window.setTimeout(resolve, ms);
+  });
+
+const waitForExcalifontMetrics = async () => {
+  const font = getFontString({
+    fontSize: EXCALIFONT_PROBE_SIZE,
+    fontFamily: FONT_FAMILY.Excalifont,
+  });
+
+  await document.fonts.load(font, EXCALIFONT_PROBE_TEXT);
+
+  const fallbackWidth = measureTextWidth(
+    `${EXCALIFONT_PROBE_SIZE}px sans-serif`,
+    EXCALIFONT_PROBE_TEXT,
+  );
+
+  if (fallbackWidth === null) {
+    return;
+  }
+
+  const deadline = Date.now() + EXCALIFONT_METRICS_WAIT_TIMEOUT_MS;
+  while (Date.now() < deadline) {
+    const excalifontWidth = measureTextWidth(font, EXCALIFONT_PROBE_TEXT);
+    if (
+      document.fonts.check(font, EXCALIFONT_PROBE_TEXT) &&
+      excalifontWidth !== null &&
+      Math.abs(excalifontWidth - fallbackWidth) > 0.5
+    ) {
+      return;
+    }
+
+    // `requestAnimationFrame` can stop firing in headless/background tabs,
+    // which would wedge Playwright visual runs. Poll on wall-clock time instead.
+    await wait(EXCALIFONT_METRICS_POLL_INTERVAL_MS);
+  }
+};
+
+export const ensureExcalidrawFontsLoaded = () => {
+  if (typeof window === "undefined") {
+    return Promise.resolve();
+  }
+
+  if ((window as any).EXCALIDRAW_ASSET_PATH === undefined) {
+    (window as any).EXCALIDRAW_ASSET_PATH = "/";
+  }
+
+  if (!excalidrawFontsReadyPromise) {
+    excalidrawFontsReadyPromise = (async () => {
+      await Fonts.loadElementsFonts([
+        {
+          type: "text",
+          fontFamily: FONT_FAMILY.Excalifont,
+          text: "preload",
+          originalText: "preload",
+        } as any,
+      ]);
+      await document.fonts.ready;
+      await waitForExcalifontMetrics();
+    })();
+  }
+
+  return excalidrawFontsReadyPromise;
+};

playground/main.tsx

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom/client";
 import App from "./index.tsx";
 import mermaid from "mermaid";
 import { DEFAULT_FONT_SIZE, MERMAID_CONFIG } from "../src/constants.ts";
+import { ensureExcalidrawFontsLoaded } from "./loadExcalidrawFonts.ts";
 
 // Initialize Mermaid
 mermaid.initialize({
@@ -14,8 +15,10 @@ mermaid.initialize({
 
 const root = ReactDOM.createRoot(document.getElementById("root")!);
 
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+void ensureExcalidrawFontsLoaded().finally(() => {
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+});