font size fixes

README.md

@@ -49,7 +49,7 @@ Currently `mermaid-to-excalidraw` only supports the :point_down: config params
   };
   /**
    * Theme variables
-   * @default { fontSize: "25px" }
+   * @default { fontSize: "20px" }
    */
   themeVariables?: {
     fontSize?: string;

src/constants.ts

@@ -10,6 +10,7 @@ export const MERMAID_CONFIG = {
   startOnLoad: false,
   flowchart: { curve: "linear" },
   themeVariables: {
+    // Multiplying by 1.25 to increase the font size by 25% and render correctly in Excalidraw
     fontSize: `${DEFAULT_FONT_SIZE * 1.25}px`,
   },
 };

src/converter/GraphConverter.ts

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

src/converter/types/flowchart.ts

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

src/graphToExcalidraw.ts

@@ -6,11 +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";
+import { ExcalidrawConfig } from "./index.js";
 
 export const graphToExcalidraw = (
   graph: Flowchart | GraphImage | Sequence | Class,
-  options: MermaidConfig = {}
+  options: ExcalidrawConfig = {}
 ): MermaidToExcalidrawResult => {
   switch (graph.type) {
     case "graphImage": {

src/index.ts

@@ -34,21 +34,29 @@ export interface MermaidConfig {
   maxTextSize?: number;
 }
 
+export interface ExcalidrawConfig {
+  fontSize?: number;
+}
+
 const parseMermaidToExcalidraw = async (
   definition: string,
   config?: MermaidConfig
 ) => {
   const mermaidConfig = config || {};
-  const parsedMermaidData = await parseMermaid(definition, config);
-
-  // Only font size supported for excalidraw elements
-  const excalidrawElements = graphToExcalidraw(parsedMermaidData, {
+  const fontSize =
+    parseInt(mermaidConfig.themeVariables?.fontSize ?? "") || DEFAULT_FONT_SIZE;
+  const parsedMermaidData = await parseMermaid(definition, {
+    ...config,
     themeVariables: {
       ...mermaidConfig.themeVariables,
-      fontSize:
-        mermaidConfig.themeVariables?.fontSize || `${DEFAULT_FONT_SIZE}px`,
+      // Multiplying by 1.25 to increase the font size by 25% and render correctly in Excalidraw
+      fontSize: `${fontSize * 1.25}px`,
     },
   });
+  // Only font size supported for excalidraw elements
+  const excalidrawElements = graphToExcalidraw(parsedMermaidData, {
+    fontSize,
+  });
   return excalidrawElements;
 };
 

src/parseMermaid.ts

@@ -47,7 +47,6 @@ export const parseMermaid = async (
   config: MermaidConfig = MERMAID_CONFIG
 ): Promise<Flowchart | GraphImage | Sequence | Class> => {
   mermaid.initialize(config);
-
   // Parse the diagram
   const diagram = await mermaid.mermaidAPI.getDiagramFromText(
     encodeEntities(definition)