Mermaid

The Mermaid component renders Mermaid diagrams in the browser using client-side rendering.

Prerequisites

Install the mermaid peer dependency:

Code
npm install mermaid

Import

Code
import { Mermaid } from "zudoku/mermaid";

Props

Code
type MermaidProps = {
  chart: string; // Mermaid diagram definition
  config?: MermaidConfig; // Optional Mermaid configuration
} & ComponentProps<"div">;

Usage

Basic Usage

Code
<Mermaid
  chart={`graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;`}
/>

With Configuration

Code
<Mermaid
  config={{ theme: "dark" }}
  chart={`sequenceDiagram
    Alice->>Bob: Hello Bob
    Bob-->>Alice: Hi Alice`}
/>