Convert mermaid diagrams to drawnix
Install packages:
yarn
Start development playground:
yarn start
Build command:
yarn build
parseMermaidToDrawnix(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-drawnix
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 { parseMermaidToDrawnix } from "@drawnix/mermaid-to-drawnix";
try {
const { elements, files } = await parseMermaidToDrawnix(
diagramDefinition,
{
themeVariables: {
fontSize: "25px",
},
}
);
// Render elements and files on Drawnix
} catch (e) {
// Parse error, displaying error message to users
}
Try out here.
Inspired by mermaid-to-excalidraw