mermaid-to-drawnix

Convert mermaid diagrams to drawnix

Set up

Install packages:

npm install

Start development playground:

npm start

Build command:

npm run build

Release

Generate CHANGELOG.md without changing the package version or creating a commit/tag:

npm run changelog

Create a release commit and tag (the default version bump is determined from Conventional Commits):

npm run release

To select the version bump explicitly, use one of these commands:

npm run release:patch
npm run release:minor
npm run release:major

After reviewing and pushing the release commit and tag, publish the package:

npm run publish:latest

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