Mermaid - Ant Design X

When to Use

Used to render interactive Mermaid diagrams that support zooming, panning, and switching between image and code views in applications.
When used together with XMarkdown, it can render Mermaid diagrams within Markdown content and enhance interactive features.

Code Demo

API

Property	Description	Type	Default
children	Code content	`string`	-
header	Header	`React.ReactNode \| null`	React.ReactNode
className	Style class name	`string`
classNames	Style class name	`string`	-
highlightProps	Code highlighting configuration	`highlightProps`	-

Semantic DOM

Theme Variables (Design Token)

Component TokenHow to use?

Token Name	Description	Type	Default Value
colorBgTitle	Title background color	string	rgba(0,0,0,0.06)
colorBorderCode	Code block border color	string	#f0f0f0
colorBorderGraph	Graph border color	string	#f0f0f0
colorTextTitle	Title text color	string	rgba(0,0,0,0.88)

Global TokenHow to use?