mermaid-to-excalidraw

Convert mermaid diagrams to excalidraw

Set up

Install packages:

yarn

Start development playground:

yarn start

Build command:

yarn build

Get started

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 👇 config params

{
  /**
   * 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:

import { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";

try {
  const { elements, files } = await parseMermaidToExcalidraw(
    diagramDefinition,
    {
      themeVariables: {
        fontSize: "25px",
      },
    }
  );
  // Render elements and files on Excalidraw
} catch (e) {
  // Parse error, displaying error message to users
}

Playground

Try out here.

Development

• yarn test:visual to run visual tests
• yarn test:visual:update to update visual tests
• yarn test:visual:dev to run visual test dev server (usually better to use this over the playground)

API

Head over to the docs.

Support new Diagram type

Head over to the docs.