fix font size variable

CHANGELOG.md

@@ -1,5 +1,13 @@
 ## Unreleased
 
+## Library
+
+### Features
+
+- 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.
+
 ## v1.0.0 (2024-05-20)
 
 ## Library

playground/ExcalidrawWrapper.tsx

@@ -31,7 +31,9 @@ const ExcalidrawWrapper = ({
     }
 
     const { elements, files } = graphToExcalidraw(mermaidOutput, {
-      fontSize: DEFAULT_FONT_SIZE,
+      themeVariables: {
+        fontSize: DEFAULT_FONT_SIZE,
+      },
     });
 
     excalidrawAPI.updateScene({

src/converter/GraphConverter.ts

@@ -1,5 +1,4 @@
-import { MermaidOptions } from "../index.js";
-import { DEFAULT_FONT_SIZE } from "../constants.js";
+import { MermaidConfig } from "../index.js";
 import { MermaidToExcalidrawResult } from "../interfaces.js";
 import { Flowchart } from "../parser/flowchart.js";
 import { Sequence } from "../parser/sequence.js";
@@ -9,17 +8,11 @@ export class GraphConverter<T = Flowchart | Sequence> {
   constructor({
     converter,
   }: {
-    converter: (
-      graph: T,
-      options: Required<MermaidOptions>
-    ) => MermaidToExcalidrawResult;
+    converter: (graph: T, options: MermaidConfig) => MermaidToExcalidrawResult;
   }) {
     this.converter = converter;
   }
-  convert = (graph: T, options: MermaidOptions) => {
-    return this.converter(graph, {
-      ...options,
-      fontSize: options.fontSize || DEFAULT_FONT_SIZE,
-    });
+  convert = (graph: T, options: MermaidConfig) => {
+    return this.converter(graph, options);
   };
 }

src/converter/types/flowchart.ts

@@ -9,6 +9,7 @@ import {
 } from "../helpers.js";
 import { VERTEX_TYPE } from "../../interfaces.js";
 import { Flowchart } from "../../parser/flowchart.js";
+import { DEFAULT_FONT_SIZE } from "../../constants.js";
 
 const computeGroupIds = (
   graph: Flowchart
@@ -78,7 +79,7 @@ const computeGroupIds = (
 export const FlowchartToExcalidrawSkeletonConverter = new GraphConverter({
   converter: (graph: Flowchart, options) => {
     const elements: ExcalidrawElementSkeleton[] = [];
-    const fontSize = options.fontSize;
+    const fontSize = options.themeVariables?.fontSize || DEFAULT_FONT_SIZE;
     const { getGroupIds, getParentId } = computeGroupIds(graph);
 
     // SubGraphs

src/graphToExcalidraw.ts

@@ -1,4 +1,3 @@
-import { MermaidOptions } from "./index.js";
 import { FlowchartToExcalidrawSkeletonConverter } from "./converter/types/flowchart.js";
 import { GraphImageConverter } from "./converter/types/graphImage.js";
 import { GraphImage, MermaidToExcalidrawResult } from "./interfaces.js";
@@ -7,10 +6,11 @@ import { Sequence } from "./parser/sequence.js";
 import { Flowchart } from "./parser/flowchart.js";
 import { Class } from "./parser/class.js";
 import { classToExcalidrawSkeletonConvertor } from "./converter/types/class.js";
+import { MermaidConfig } from "./index.js";
 
 export const graphToExcalidraw = (
   graph: Flowchart | GraphImage | Sequence | Class,
-  options: MermaidOptions = {}
+  options: MermaidConfig = {}
 ): MermaidToExcalidrawResult => {
   switch (graph.type) {
     case "graphImage": {

src/index.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_FONT_SIZE } from "./constants.js";
 import { graphToExcalidraw } from "./graphToExcalidraw.js";
 import { parseMermaid } from "./parseMermaid.js";
 
@@ -7,7 +8,7 @@ export interface MermaidConfig {
     curve?: "linear" | "basis";
   };
   themeVariables?: {
-    fontSize?: string;
+    fontSize?: number;
   };
   maxEdges?: number;
   maxTextSize?: number;
@@ -21,7 +22,10 @@ const parseMermaidToExcalidraw = async (
 
   // Only font size supported for excalidraw elements
   const excalidrawElements = graphToExcalidraw(parsedMermaidData, {
-    fontSize: config.themeVariables?.fontSize,
+    themeVariables: {
+      ...config.themeVariables,
+      fontSize: config.themeVariables?.fontSize || DEFAULT_FONT_SIZE,
+    },
   });
   return excalidrawElements;
 };

src/parseMermaid.ts

@@ -1,6 +1,6 @@
 import mermaid, { MermaidConfig } from "mermaid";
 import { GraphImage } from "./interfaces.js";
-import { DEFAULT_FONT_SIZE, MERMAID_CONFIG } from "./constants.js";
+import { MERMAID_CONFIG } from "./constants.js";
 import { encodeEntities } from "./utils.js";
 import { Flowchart, parseMermaidFlowChartDiagram } from "./parser/flowchart.js";
 import { Sequence, parseMermaidSequenceDiagram } from "./parser/sequence.js";