mermaid-to-excalidraw

To set up the project for development or use the build commands, use the following commands:

• Install dependencies: yarn
• Start the development playground: yarn start
• Build the project: yarn build

The primary API for converting Mermaid diagrams to Excalidraw elements is parseMermaidToExcalidraw. It accepts a Mermaid diagram definition string and an optional configuration object.

Returns a Promise that resolves to an object containing elements and files which can be rendered on Excalidraw. If the parsing fails, it throws an error that should be caught to display the message to users.

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
}

Manually construct a Text skeleton by providing the position and content.

const text = createTextSkeleton(100, 100, 'Sample Text', {
  fontSize: 20,
  color: '#000000',
  id: 'text-1'
});

Manually construct an Arrow skeleton by providing coordinates and optional configuration. This is useful when you have the start and end points of an arrow but not an SVG element.

const arrow = createArrowSkeletion(10, 10, 100, 100, {
  id: 'my-arrow-id',
  label: { text: 'Hello' },
  strokeColor: '#ff0000',
  strokeStyle: 'dashed',
  startArrowhead: 'cardinality_one',
  endArrowhead: 'cardinality_many'
});

Convert an existing SVGLineElement or SVGPathElement into an Arrow skeleton. This function handles coordinate extraction from line tags or path command parsing for path tags, and automatically calculates points for curved paths.

// Assuming arrowNode is an SVGLineElement or SVGPathElement
const arrow = createArrowSkeletonFromSVG(arrowNode, {
  label: 'Arrow Label',
  strokeStyle: 'solid',
  startArrowhead: 'cardinality_one',
  endArrowhead: 'cardinality_many'
});

The parseMermaidToExcalidraw function converts a Mermaid diagram definition string into Excalidraw elements. It is an asynchronous function that accepts the Mermaid definition and an optional MermaidConfig object. It returns a promise that resolves to an array of Excalidraw elements.

import { parseMermaidToExcalidraw } from '@excalidraw/mermaid-to-excalidraw';

const mermaidDefinition = `graph TD;\nA-->B;`;
const excalidrawElements = await parseMermaidToExcalidraw(mermaidDefinition, {
  themeVariables: { fontSize: '20px' }
});

Extract a Text skeleton from an SVGTextElement. It uses the element's bounding box (getBBox) to determine width and height, and getComputedStyle to resolve font size and color.

// Assuming textNode is an SVGTextElement
const text = createTextSkeletonFromSVG(textNode, 'Extracted Text', {
  id: 'svg-text-id',
  groupId: 'group-1'
});

Convert an SVGSVGElement or SVGRectElement into a Container skeleton (type rectangle or ellipse). It extracts dimensions from the bounding box and applies specific styling based on the subtype:

• highlight: Uses the SVG fill attribute as bgColor.
• note: Sets strokeStyle to dashed automatically.

// Assuming node is an SVGRectElement
const container = createContainerSkeletonFromSVG(node, 'rectangle', {
  id: 'rect-1',
  subtype: 'highlight',
  label: { text: 'Container Label' }
});

Convert an SVGLineElement into a Line skeleton. It extracts stroke and stroke-width attributes from the SVG element.

// Assuming lineNode is an SVGLineElement
const line = createLineSkeletonFromSVG(lineNode, 0, 0, 100, 100, {
  id: 'line-1'
});