diff --git a/CHANGELOG.md b/CHANGELOG.md index e270dd3c..586723d4 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/README.md b/README.md index e83ce3cd..d698346f 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index a8820334..c591627d 100644 --- a/package.json +++ b/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", diff --git a/src/constants.ts b/src/constants.ts index c55c6b3b..28d868f2 100644 --- a/src/constants.ts +++ b/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, }; diff --git a/src/converter/GraphConverter.ts b/src/converter/GraphConverter.ts index 8ff342cf..d3ad301c 100644 --- a/src/converter/GraphConverter.ts +++ b/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 { }: { converter: ( graph: T, - options: Required + config: Required ) => 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, }); }; } diff --git a/src/graphToExcalidraw.ts b/src/graphToExcalidraw.ts index 52a0675f..9b26a380 100644 --- a/src/graphToExcalidraw.ts +++ b/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": { diff --git a/src/index.ts b/src/index.ts index 2139901f..bd25f2fe 100644 --- a/src/index.ts +++ b/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; }; diff --git a/src/parseMermaid.ts b/src/parseMermaid.ts index 5de62f23..156fa3c1 100644 --- a/src/parseMermaid.ts +++ b/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 => { - mermaid.initialize(MERMAID_CONFIG); - + mermaid.initialize({ ...MERMAID_CONFIG, ...config }); // Parse the diagram const diagram = await mermaid.mermaidAPI.getDiagramFromText( encodeEntities(definition) diff --git a/src/types.ts b/src/types.ts index 663372c2..1212107f 100644 --- a/src/types.ts +++ b/src/types.ts @@ -16,5 +16,3 @@ export type ExcalidrawVertexElement = | ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement; - - \ No newline at end of file