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 mermaid options in mermaid-diagram.tsx:

mermaid.initialize({ theme: "default" });

Streaming Performance#

The MermaidDiagram component is optimized for streaming scenarios:

• Smart completion detection: Only renders when the specific code block is complete
• Zero failed renders: Avoids parsing incomplete diagram code during streaming

Supported Diagram Types#

Mermaid supports various diagram types including:

• Flowcharts and decision trees
• Sequence diagrams
• Gantt charts
• Class diagrams
• State diagrams
• Git graphs
• User journey maps
• Entity relationship diagrams

See the Mermaid documentation for complete syntax reference.

Related Components#

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