@excalidraw/mermaid-to-excalidraw
v1.1.0
Published
Mermaid to Excalidraw Diagrams
Downloads
14,471
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
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
{
/**
* 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.
API
Head over to the docs.
Support new Diagram type
Head over to the docs.