Components

Mermaid

A client-side component that renders Mermaid diagram syntax into SVG diagrams. Handles diagram rendering with error states and loading states. Falls back to code block display if rendering fails.

File: packages/site-template/components/mermaid.tsx Category: Visualization

Props

Usage

import { Mermaid } from '@/components/mermaid';

export function DiagramExample() {
  return (
    <Mermaid code="graph LR\n  A[Start] --> B[Process]\n  B --> C[End]" />
  );
}