https://github.com/excalidraw/mermaid-to-excalidraw

Generate Excalidraw diagrams from Mermaid
https://github.com/excalidraw/mermaid-to-excalidraw

Last synced: about 2 months ago
JSON representation

Generate Excalidraw diagrams from Mermaid

• Host: GitHub
• URL: https://github.com/excalidraw/mermaid-to-excalidraw
• Owner: excalidraw
• License: mit
• Created: 2023-04-17T11:33:34.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-07-29T15:15:07.000Z (about 2 months ago)
• Last Synced: 2024-07-29T20:39:08.167Z (about 2 months ago)
• Language: TypeScript
• Homepage: https://mermaid-to-excalidraw.vercel.app
• Size: 2.81 MB
• Stars: 227
• Watchers: 9
• Forks: 36
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# mermaid-to-excalidraw

Convert mermaid diagrams to excalidraw

## Set up

Install packages:

```

yarn

```

Start development playground:

```

yarn start

```

Build command:

```

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,

    {

      themeVariables: {

        fontSize: "25px",

      },

    }

  );

  // Render elements and files on Excalidraw

} catch (e) {

  // Parse error, displaying error message to users

}

```

## Playground

Try out [here](https://mermaid-to-excalidraw.vercel.app).

## API

Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/mermaid-to-excalidraw/api).

## Support new Diagram type

Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/mermaid-to-excalidraw/codebase/new-diagram-type).