---
group:
  title: 输出
  order: 3
title: Mermaid
description: Mermaid 图表
---

<DemoTitle title="Mermaid" desc="Mermaid 是 React 中用于渲染 Mermaid 图表的组件。它支持多种图表类型，如流程图、序列图、类图等，具有可定制的样式和交互功能。"></DemoTitle>

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

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

#### Mermaid 更多示例

<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>

更多示例请参考 [Mermaid Docs](https://mermaid.js.org/intro/)

#### API

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