---
group:
  title: Output
  order: 3
title: Mermaid
description: Mermaid Chart
---

<DemoTitle title="Mermaid" desc="Mermaid is a component for rendering Mermaid diagrams in React. It supports various diagram types like flowcharts, sequence diagrams, class diagrams, and more with customizable styling and interactive features."></DemoTitle>

<code src="./demo/basic.tsx" height="auto">Example</code>

<Install>import { Mermaid } from '@agentscope-ai/chat'</Install>

#### More Mermaid Example

<code src="./demo/flowchart.tsx" height="auto">Flowchart</code>
<code src="./demo/sequence.tsx" height="auto">Sequence Diagram</code>
<code src="./demo/class.tsx" height="auto">Class Diagram</code>
<code src="./demo/state.tsx" height="auto">State Diagram</code>
<code src="./demo/timeline.tsx" height="auto">Timeline</code>

For more examples, please refer to [Mermaid Docs](https://mermaid.js.org/intro/)

#### API

<ApiParser source="./index.tsx" id="IMermaidProps"></ApiParser>