Client Usage

/**
 * Returns the current Mermaid configuration with theme applied based on color mode
 * @returns MermaidConfig object with theme and options merged
 */
function useMermaidConfig(): MermaidConfig;

interface MermaidConfig {
  startOnLoad: boolean;
  theme: string;
  [key: string]: any;
}

import { useMermaidConfig } from "@docusaurus/theme-mermaid/client";

function MyDiagramComponent() {
  const config = useMermaidConfig();
  // config.theme will be 'default' or 'dark' based on current color mode
  // config.startOnLoad will be false by default
  // Additional options from themeConfig.mermaid.options are merged
}

/**
 * Returns the Mermaid-specific theme configuration from Docusaurus theme config
 * @returns Mermaid theme configuration object
 */
function useMermaidThemeConfig(): ThemeConfig['mermaid'];

interface MermaidThemeConfigResult {
  theme: {
    light: string;
    dark: string;
  };
  options: Record<string, any>;
}

/**
 * Renders Mermaid text to SVG and handles errors with optional custom configuration
 * @param params - Configuration object with text and optional config
 * @returns RenderResult object or null if rendering is in progress
 */
function useMermaidRenderResult(params: {
  text: string;
  config?: MermaidConfig;
}): RenderResult | null;

interface RenderResult {
  svg: string;
  bindFunctions?: (element: Element) => void;
}

import { useMermaidRenderResult } from "@docusaurus/theme-mermaid/client";

function CustomMermaidRenderer({ diagramText }: { diagramText: string }) {
  const renderResult = useMermaidRenderResult({ text: diagramText });
  
  if (!renderResult) {
    return <div>Loading diagram...</div>;
  }
  
  return (
    <div 
      dangerouslySetInnerHTML={{ __html: renderResult.svg }}
      onLoad={() => renderResult.bindFunctions?.(/* element */)}
    />
  );
}

/**
 * Stable CSS class name for targeting Mermaid containers with custom styles
 */
const MermaidContainerClassName: string; // "docusaurus-mermaid-container"

import { MermaidContainerClassName } from "@docusaurus/theme-mermaid/client";

// In your CSS
const styles = `
  .${MermaidContainerClassName} {
    border: 1px solid var(--ifm-color-emphasis-300);
    border-radius: 8px;
    padding: 1rem;
  }
`;

import React from "react";
import ErrorBoundary from "@docusaurus/ErrorBoundary";
import { useMermaidRenderResult } from "@docusaurus/theme-mermaid/client";

function SafeMermaidRenderer({ text }: { text: string }) {
  return (
    <ErrorBoundary fallback={<div>Failed to render diagram</div>}>
      <MermaidContent text={text} />
    </ErrorBoundary>
  );
}

function MermaidContent({ text }: { text: string }) {
  const result = useMermaidRenderResult({ text });
  return result ? <div dangerouslySetInnerHTML={{ __html: result.svg }} /> : null;
}