import { MermaidSample } from "@/components/docs/samples/mermaid";

Getting Started#

Add mermaid-diagram component#

<InstallCommand shadcn={["mermaid-diagram"]} />

This will install the required dependencies and add the component to your project.

Add it to componentsByLanguage in markdown-text.tsx#

import { MermaidDiagram } from "@/components/assistant-ui/mermaid-diagram"; // [!code ++]

const MarkdownTextImpl = () => {
  return (
    <MarkdownTextPrimitive
      remarkPlugins={[remarkGfm]}
      className="aui-md"
      components={defaultComponents}
      componentsByLanguage={{ // [!code ++]
        mermaid: { // [!code ++]
          SyntaxHighlighter: MermaidDiagram // [!code ++]
        }, // [!code ++]
      }} // [!code ++]
    />
  );
};

export const MarkdownText = memo(MarkdownTextImpl);

Configuration#

Configure rendering options in mermaid-diagram.tsx:

renderMermaidSVG(code, {
  bg: "var(--background)",
  fg: "var(--foreground)",
  muted: "var(--muted-foreground)",
  border: "var(--border)",
  accent: "var(--foreground)",
  transparent: true,
});

The palette follows your theme's background, foreground, and shadcn color tokens, so diagrams match light and dark mode automatically.

Streaming Performance#

The MermaidDiagram component is optimized for streaming scenarios:

• Skeleton while streaming: Shows a placeholder skeleton until the response finishes streaming, then renders the diagram synchronously
• Raw source fallback: Invalid or unsupported diagrams fall back to displaying the raw source

Supported Diagram Types#

The component renders these diagram types:

• Flowcharts and decision trees
• Sequence diagrams
• Class diagrams
• State diagrams
• Entity relationship diagrams
• XY charts (bar, line, combined)

Other mermaid diagram types fall back to displaying the raw source. See the Mermaid documentation for syntax reference.

Related Components#

• Markdown - Rich text rendering where mermaid is integrated
• Syntax Highlighting - Code highlighting for other languages