@drawnix/mermaid-to-drawnix

mermaid-to-drawnix

Convert mermaid diagrams to drawnix

Set up

Install packages:

yarn

Start development playground:

yarn start

Build command:

yarn build

Get started

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 :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 { 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
}

Playground

Try out here.

Thanks

Inspired by mermaid-to-excalidraw