# @excalidraw/mermaid-to-excalidraw

> Mermaid to Excalidraw Diagrams

Latest version **2.2.2** (published 2026-03-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @excalidraw/mermaid-to-excalidraw
pnpm add @excalidraw/mermaid-to-excalidraw
yarn add @excalidraw/mermaid-to-excalidraw
bun add @excalidraw/mermaid-to-excalidraw
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.2.2 |
| Published | 2026-03-24 |
| First published | 2023-08-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 322.3 KB |
| Known vulnerabilities | 0 (+4 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | dwelle, maielo |

## Links

- npm: https://www.npmjs.com/package/@excalidraw/mermaid-to-excalidraw
- npm.io page: https://npm.io/package/@excalidraw/mermaid-to-excalidraw

## Dependencies (4)

- [nanoid](https://npm.io/package/nanoid.md) 4.0.2
- [mermaid](https://npm.io/package/mermaid.md) ^11.12.1
- [@mermaid-js/parser](https://npm.io/package/@mermaid-js/parser.md) ^0.6.3
- [@excalidraw/markdown-to-text](https://npm.io/package/@excalidraw/markdown-to-text.md) 0.1.2

## Recent versions

- 2.2.2 (latest) — 2026-03-24
- 2.0.0-rfc3 (test) — 2026-01-15
- 1.1.0-next.5 (next) — 2024-07-10
- 0.1.2-d-uml (preview) — 2023-12-06
- 2.2.1 — 2026-03-24
- 2.1.1 — 2026-03-12
- 2.1.0 — 2026-03-11
- 2.0.0-rc4 — 2026-03-05
- 2.0.0-rfc2 — 2026-01-15
- 2.0.0-rfc1 — 2026-01-15
- 2.0.0-test2 — 2025-12-12
- 2.0.0-test1 — 2025-12-12
- 2.0.0 — 2025-11-25
- 1.1.4 — 2025-11-21
- 1.1.3 — 2025-08-21
- … 33 more at https://npm.io/package/@excalidraw/mermaid-to-excalidraw/versions

## 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).

## 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](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).

---
_Source: https://npm.io/package/@excalidraw/mermaid-to-excalidraw · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._