change fontSize to string

CHANGELOG.md

@@ -6,7 +6,7 @@
 
 - Add support for passing config params `maxEdge` and `maxTextSize` to mermaid by [@ad1992](https://github.com/ad1992) in https://github.com/excalidraw/mermaid-to-excalidraw/pull/68
 
-Additonally the param `fontSize` is renamed to `themeVariables.fontSize` to be consistent with the [mermaid config](https://mermaid.js.org/schemas/config.schema.json).
+Additonally the param `fontSize` is renamed to `themeVariables.fontSize` and type is changed from `number` to `string` to be consistent with the [mermaid config](https://mermaid.js.org/schemas/config.schema.json).
 
 ## v1.0.0 (2024-05-20)
 

README.md

@@ -49,10 +49,10 @@ Currently `mermaid-to-excalidraw` only supports the :point_down: config params
   };
   /**
    * Theme variables
-   * @default { fontSize: 25 }
+   * @default { fontSize: "25px" }
    */
   themeVariables?: {
-    fontSize?: number;
+    fontSize?: string;
   };
   /**
    * Maximum number of edges to be rendered.
@@ -77,7 +77,7 @@ try {
     diagramDefinition,
     {
       themeVariables: {
-        fontSize: DEFAULT_FONT_SIZE,
+        fontSize: "25px",
       },
     }
   );

playground/ExcalidrawWrapper.tsx

@@ -32,7 +32,7 @@ const ExcalidrawWrapper = ({
 
     const { elements, files } = graphToExcalidraw(mermaidOutput, {
       themeVariables: {
-        fontSize: DEFAULT_FONT_SIZE,
+        fontSize: `${DEFAULT_FONT_SIZE}px`,
       },
     });
 

playground/index.tsx

@@ -4,6 +4,7 @@ import ExcalidrawWrapper from "./ExcalidrawWrapper.tsx";
 import Testcases from "./Testcases.tsx";
 import { parseMermaid } from "../src/parseMermaid.ts";
 import GitHubCorner from "./GitHubCorner.tsx";
+import { DEFAULT_FONT_SIZE } from "../src/constants.ts";
 
 export interface MermaidData {
   definition: string;

src/converter/types/flowchart.ts

@@ -79,7 +79,8 @@ const computeGroupIds = (
 export const FlowchartToExcalidrawSkeletonConverter = new GraphConverter({
   converter: (graph: Flowchart, options) => {
     const elements: ExcalidrawElementSkeleton[] = [];
-    const fontSize = options.themeVariables?.fontSize || DEFAULT_FONT_SIZE;
+    const fontSize =
+      parseInt(options.themeVariables?.fontSize ?? "") || DEFAULT_FONT_SIZE;
     const { getGroupIds, getParentId } = computeGroupIds(graph);
 
     // SubGraphs

src/index.ts

@@ -17,9 +17,10 @@ export interface MermaidConfig {
   };
   /**
    * Theme variables
+   * @default { fontSize: "25px" }
    */
   themeVariables?: {
-    fontSize?: number;
+    fontSize?: string;
   };
   /**
    * Maximum number of edges to be rendered.
@@ -44,7 +45,8 @@ const parseMermaidToExcalidraw = async (
   const excalidrawElements = graphToExcalidraw(parsedMermaidData, {
     themeVariables: {
       ...mermaidConfig.themeVariables,
-      fontSize: mermaidConfig.themeVariables?.fontSize || DEFAULT_FONT_SIZE,
+      fontSize:
+        mermaidConfig.themeVariables?.fontSize || `${DEFAULT_FONT_SIZE}px`,
     },
   });
   return excalidrawElements;