Components

/**
 * Main React component for rendering Mermaid diagrams with built-in error boundaries
 * @param props - Component props containing Mermaid diagram text
 * @returns React node with rendered Mermaid diagram or error fallback
 */
function Mermaid(props: Props): ReactNode;

interface Props {
  /** Mermaid diagram text content to render */
  value: string;
}

import React from "react";
import Mermaid from "@theme/Mermaid";

export default function MyDocPage() {
  const flowchartCode = `
    graph TD
      A[User Request] --> B{Valid Input?}
      B -->|Yes| C[Process Data]
      B -->|No| D[Return Error]
      C --> E[Generate Response]
      D --> F[Send Error Message]
      E --> G[Send Response]
      F --> G
  `;

  const sequenceCode = `
    sequenceDiagram
      participant Client
      participant Server
      participant Database
      
      Client->>Server: API Request
      Server->>Database: Query Data
      Database-->>Server: Return Results
      Server-->>Client: JSON Response
  `;

  return (
    <div>
      <h2>Process Flow</h2>
      <Mermaid value={flowchartCode} />
      
      <h2>API Sequence</h2>
      <Mermaid value={sequenceCode} />
    </div>
  );
}

// Internal implementation structure (not directly exported)
function Mermaid(props: Props): ReactNode {
  return (
    <ErrorBoundary fallback={ErrorBoundaryErrorMessageFallback}>
      <MermaidRenderer {...props} />
    </ErrorBoundary>
  );
}

// Internal MermaidRenderer component (not directly exported)
function MermaidRenderer({ value }: Props): ReactNode;

// Internal MermaidRenderResult component (not directly exported)
function MermaidRenderResult({ renderResult }: { 
  renderResult: RenderResult 
}): ReactNode;

/* In your custom CSS */
.docusaurus-mermaid-container {
  margin: 2rem 0;
  text-align: center;
}

.docusaurus-mermaid-container svg {
  max-width: 100%;
  height: auto;
}

/* Dark theme specific styles */
[data-theme='dark'] .docusaurus-mermaid-container {
  background-color: var(--ifm-background-color-subtle);
  border-radius: 8px;
  padding: 1rem;
}