Mermaid Diagrams

Render Mermaid diagrams in chat messages with the mermaid-diagram component.

npx shadcn@latest add "https://r.assistant-ui.com/mermaid-diagram"

import { MermaidDiagram } from "@/components/assistant-ui/mermaid-diagram";

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

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.