feat: support maxEdges, maxTextSize and more params in mermaid config and release v1.1.0 🚀 (#68)

* feat: support maxEdges and maxTextSize in mermaid config

* fix font size variable

* add link

* update cl

* update fontSize variable in readme

* update docs

* update docs

* change fontSize to string

* fix

* font size fixes

* add max edge and max TextSize:

* update cl

* fix playground

* spread the config with init config so diagram doesn't get impacted

* mark options as required in convertor

* upgrade to v1.1.0

Author: ad1992

CHANGELOG.md

@@ -1,4 +1,14 @@
-## Unreleased
+## v1.1.0 (2024-07-10)
+
+## Library
+
+### Features
+
+- Add support for passing config params `maxEdge`, `maxTextSize` and more params to mermaid by [@ad1992](https://github.com/ad1992) in https://github.com/excalidraw/mermaid-to-excalidraw/pull/68.
+
+You can read about it [here](https://github.com/excalidraw/mermaid-to-excalidraw/blob/f2c4908acd1a4837e71169fd9b339a7eee1c63bc/README.md#get-started).
+
+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

@@ -24,15 +24,63 @@ yarn build
 
 ## Get started
 
+```ts
+parseMermaidToExcalidraw(diagramDefinition: string, config?: MermaidConfig)
+```
+
+The `diagramDefinition` is the mermaid diagram definition.
+and `config` is the mermaid config. You can use the `config` param when you want to pass some custom config to mermaid.
+
+Currently `mermaid-to-excalidraw` only supports the :point_down: config params
+
+```ts
+{
+  /**
+   * Whether to start the diagram automatically when the page loads.
+   * @default false
+   */
+  startOnLoad?: boolean;
+  /**
+   * The flowchart curve style.
+   * @default "linear"
+   */
+  flowchart?: {
+    curve?: "linear" | "basis";
+  };
+  /**
+   * Theme variables
+   * @default { fontSize: "20px" }
+   */
+  themeVariables?: {
+    fontSize?: string;
+  };
+  /**
+   * Maximum number of edges to be rendered.
+   * @default 500
+   */
+  maxEdges?: number;
+  /**
+   * Maximum number of characters to be rendered.
+   * @default 50000
+   */
+  maxTextSize?: number;
+}
+```
+
 Example code:
 
 ```ts
 import { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";
 
 try {
-  const { elements, files } = await parseMermaidToExcalidraw(diagramDefinition, {
-    fontSize: DEFAULT_FONT_SIZE,
-  });
+  const { elements, files } = await parseMermaidToExcalidraw(
+    diagramDefinition,
+    {
+      themeVariables: {
+        fontSize: "25px",
+      },
+    }
+  );
   // Render elements and files on Excalidraw
 } catch (e) {
   // Parse error, displaying error message to users

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/mermaid-to-excalidraw",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Mermaid to Excalidraw Diagrams",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/constants.ts

@@ -5,10 +5,14 @@ export const SVG_TO_SHAPE_MAPPER: { [key: string]: "rectangle" | "ellipse" } = {
   circle: "ellipse",
 };
 
+// visit https://mermaid.js.org/schemas/config.schema.json for default schema
 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`,
   },
+  maxEdges: 500,
+  maxTextSize: 50000,
 };

src/converter/GraphConverter.ts

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

src/graphToExcalidraw.ts

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

src/index.ts

@@ -1,15 +1,62 @@
+import { DEFAULT_FONT_SIZE } from "./constants.js";
 import { graphToExcalidraw } from "./graphToExcalidraw.js";
 import { parseMermaid } from "./parseMermaid.js";
 
-export interface MermaidOptions {
+export interface MermaidConfig {
+  /**
+   * Whether to start the diagram automatically when the page loads.
+   * @default false
+   */
+  startOnLoad?: boolean;
+  /**
+   * The flowchart curve style.
+   * @default "linear"
+   */
+  flowchart?: {
+    curve?: "linear" | "basis";
+  };
+  /**
+   * Theme variables
+   * @default { fontSize: "25px" }
+   */
+  themeVariables?: {
+    fontSize?: string;
+  };
+  /**
+   * Maximum number of edges to be rendered.
+   * @default 1000
+   */
+  maxEdges?: number;
+  /**
+   * Maximum number of characters to be rendered.
+   * @default 1000
+   */
+  maxTextSize?: number;
+}
+
+export interface ExcalidrawConfig {
   fontSize?: number;
 }
+
 const parseMermaidToExcalidraw = async (
   definition: string,
-  options: MermaidOptions = {}
+  config?: MermaidConfig
 ) => {
-  const parsedMermaidData = await parseMermaid(definition);
-  const excalidrawElements = graphToExcalidraw(parsedMermaidData, options);
+  const mermaidConfig = config || {};
+  const fontSize =
+    parseInt(mermaidConfig.themeVariables?.fontSize ?? "") || DEFAULT_FONT_SIZE;
+  const parsedMermaidData = await parseMermaid(definition, {
+    ...mermaidConfig,
+    themeVariables: {
+      ...mermaidConfig.themeVariables,
+      // 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

@@ -1,6 +1,6 @@
-import mermaid from "mermaid";
+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";
@@ -43,10 +43,10 @@ const convertSvgToGraphImage = (svgContainer: HTMLDivElement) => {
 };
 
 export const parseMermaid = async (
-  definition: string
+  definition: string,
+  config: MermaidConfig = MERMAID_CONFIG
 ): Promise<Flowchart | GraphImage | Sequence | Class> => {
-  mermaid.initialize(MERMAID_CONFIG);
-
+  mermaid.initialize({ ...MERMAID_CONFIG, ...config });
   // Parse the diagram
   const diagram = await mermaid.mermaidAPI.getDiagramFromText(
     encodeEntities(definition)

src/types.ts

@@ -16,5 +16,3 @@ export type ExcalidrawVertexElement =
   | ExcalidrawRectangleElement
   | ExcalidrawDiamondElement
   | ExcalidrawEllipseElement;
-
-